本文重点解决刷新页面数据丢失的问题,一般情况下,调试过程中,数据会变空;部署到服务器后,如果刷新,可能会报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好像也同样可以达到类似效果。
搞定。