vue----sessionStorage保存用户登录数据,解决vuex在页面刷新之后状态丢失问题
需求说明:在之前写的文章中,vue---将登录成功后后台返回的参数token,id等保存在store中,供其他组件调用存在问题:当页面刷新后,vuex中的数据被初始化,导致vuex的state丢失。那么如何防止页面刷新后state丢失呢?解决方案:借助sessionStorage或loacalStorage,...
需求说明:
在之前写的文章中,vue---将登录成功后后台返回的参数token,id等保存在store中,供其他组件调用 存在问题:当页面刷新后,vuex中的数据被初始化,导致vuex的state丢失。那么如何防止页面刷新后state丢失呢?
解决方案:
借助sessionStorage解决上述问题, sessionStorage属性允许在浏览器中存储 key/value 对的数据。
知识点:
sessionStorage语法如下:
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
注意:sessionStorage只能存储字符串类型,因此当需要保存object类型的数据到sessionStorage中,先需要进行序列化。
【 sessionStorage.setItem("loginUserInfo", JSON.stringify(userInfo));】获取数据时,将之前存储的JSON字符串先转成JSON对象再进行操作【 JSON.parse(sessionStorage.getItem("loginUserInfo"));】
本案例将后台传回的token直接保存在sessionStorage中,在axios实例中,当设置headers时,直接从sessionStorage获取。将后台传回的用户数据通过sessionStorage传入vuex中。
(1)登录组件【Login.vue】中,当登录成功后
①把token直接保存在sessionStorage中;
②通过【 this.$store.commit("setUserInfo", res.data.result.user);】,提交mutation。
(2)①在axios实例中,当设置headers时,直接从sessionStorage获取
在router中【index.js】中加入组件内守卫如下:
// 路径"/"为登录路径
router.beforeEach((to, from, next) => {
if (to.path == "/") {
sessionStorage.removeItem("token");
}
let token = sessionStorage.getItem("token");
if (!token && to.path != "/") {
next({ path: "/" });
} else {
next();
}
});
②在store中的【index.js】中如下:mutations【setUserInfo】中,通过【sessionStorage.setItem('key','value')】保存用户信息,在getters【loginUserInfo】中,获取用户信息,注意:当页面刷新时,vuex的数据会被初始化,因而需判断,当state中的用户信息为空时,需要从【sessionStorage.getItem('key')】中获取用户信息,不为空则直接返回。
在其他组件中,调用【loginUserInfo】
参考文章:
更多推荐
所有评论(0)