vue----sessionStorage保存用户登录数据，解决vuex在页面刷新之后状态丢失问题

需求说明：

在之前写的文章中，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】

 

 

参考文章：

• 在vue中使用session Storage和vuex保存用户登录状态
• MDN Window.sessionStorage
• Vue | 在vue中使用session Storage和vuex保存用户登录状态