关于vue3刷新页面后，数据丢失问题

本文重点解决刷新页面数据丢失的问题，一般情况下，调试过程中，数据会变空；部署到服务器后，如果刷新，可能会报404 NOT FOUND.

一开始解决，思路大概是将数据存储到piniaStore中，但是interesting，刷新页面Store照样清空刷新，它并不是一个永久存在的仓库。

解决这类方法需要用到老朋友：localStorage 和 sessionStorage

对于服务器返回的用户登录信息（用户名、密码、token等），一般建议将敏感信息存储在客户端的 sessionStorage 中，而将持久化的数据（如用户配置、偏好设置等）存储在 localStorage 中。

使用 sessionStorage 的优势是数据的生命周期受限于会话，即当用户关闭浏览器窗口或标签页时，数据会自动清除，提供了更高的安全性。这对于敏感信息如用户的登录状态和访问令牌是很重要的，因为它们应该在用户结束会话后立即失效。

另一方面，localStorage 具有较长的数据保留周期，即使用户关闭浏览器，数据也会一直保留。这使得它适合存储持久化的数据，如用户的偏好设置和本地缓存的数据，以便在用户下次访问网站时仍然可用。

此处登录信息的存储果断使用sessionStorage ，调用方法：

// 在组件中存储数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 在组件中从 sessionStorage 获取数据
const value = sessionStorage.getItem('key');

// 在组件中移除 sessionStorage 中的数据
sessionStorage.removeItem('key');

// 在组件中清空 sessionStorage
sessionStorage.clear();

如此，在需要存储的位置直接调用方法就好。

而对于router，为了确保其他人不会在域名中直接添加 /路由地址 等直接访问，

启用路由守卫是极好的方法，

router.beforeEach((to, from, next) => {
  const isLoggedIn = checkLoginStatus();
  if (to.name !== "login" && !isLoggedIn) {
    next({ name: "login" });
  } else {
    next();
  }
});

 

router.beforeEach 是 Vue Router 提供的导航守卫，用于在路由切换之前执行一些逻辑。可以使用它来进行路由导航的控制、身份验证、权限检查等操作。

使用 router.beforeEach，你可以在每次路由切换之前执行一段代码。该代码接收三个参数：

• to：即将进入的路由对象。
• from：当前导航正要离开的路由对象。
• next：调用该方法后，才能继续进行路由导航。

next 方法有以下几种用法：

• next()：继续进行路由导航。
• next(false)：中断当前的导航。
• next('/') 或 next({ path: '/' })：跳转到指定路径。
• next(error)：中止当前导航，并将错误传递给 router.onError 注册的回调。

当然，此处调用beforeRouteEnter好像也同样可以达到类似效果。

搞定。