刷新页面vuex数据不消失和不跳转页面

先说点什么

vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特意来分享一下,首先声明没有什么基础介绍,用的是登陆状态存储sessionStorage的方法!!!

进入正题

刷新

刷新至关与重启项目，以前获取到的数据也只是经过store暂存起来，项目关闭时就不见了，这有些像电脑重启，存储在RAM的数据会消失。可是储存在sessionstorage、localstorage和cookie里的内容不会消失.

Vuex

方法思路

首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,也就是说vuex中的store中的数据都是临时的,都是一些变量,页面刷新从新加载,全部都清空,而且已经在页面中没有进行二次登录,vuex中就一直是空的,因此就分生出了几个方法

1.由于sessionstorage(关闭页面会消失)、localstorage和cookie刷新页面数据不会消失,因此能够把全部请求到的数据都储存在里边,用的时候再取
2.使用vuex插件
3.登陆的时候把token和登陆状态(自定义的)赋值给sessionstorage,当刷新页面的时候(路由跳转)从 sessionstorage中获取token和登陆状态赋值给store,就会本身从新请求相关页面的数据

我思考事后我选择了方法3,只不过这个方法要和路由拦截结合起来,后面路由完事一块儿贴代码

代码

index

actions

// 登陆
  Login({ commit, state }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        let token = response.data.token;
        commit('SET_TOKEN', token);
        sessionStorage.setItem('token', token);    //获取到新的token的时候赋值给sessionStorage

        commit('SET_ISLOGIN', true);    // 登陆成功修改store中的登陆状态
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

路由

简单介绍: 路由拦截就至关于路由的'生命周期',在路由的不一样时间段插入一个方法,能够在此时间段想要作什么事情,本次只在路由跳转前搞事情,因此只使用router.beforeEach((to, from, next) => { // ... })便可,具体内容官网都很详细

main.js

router.beforeEach((to, from, next) => {
  let isLogin = sessionStorage.getItem('isLogin');
  let token = sessionStorage.getItem('token');
  let id = sessionStorage.getItem('id');
  if (to.meta.requireAuth) {    // 判断是否有权限
    if (!store.state.isLogin && !isLogin && to.path !== '/login') {    // store和sessionStorage中登陆状态都为false而且跳转到 不是登陆的页面时 都强行跳转到登陆页面    
      next({
        path: '/login',
      });
    } else if (!isLogin && to.path !== '/login') {    // 已经在登陆页面进入首页的时候
      sessionStorage.setItem('isLogin', store.state.isLogin);
      next();
    } else if (isLogin && to.path !== '/login') {    // 登陆进入后刷新页面时
      store.commit('SET_TOKEN', token);
      store.commit('SET_ISLOGIN', isLogin);
      store.commit('SET_ID', id);
      next();
    } else {
      next();
    }
  }
  else {
    next();
  }
});

坑

1.路由拦截我是写在main.js文件中的,要注意 必定要写在vue挂载的上面(new Vue)
2.当点击登陆的时候 actions中的登陆方法要早于路由拦截
3.退出的登陆的时候 不要忘记把sessionStorage里的变量删除

最后再说点什么

但愿本文能够给你提供一些帮助,这是我最高兴的,以为我有写的不对或者有问题的地方也请帮我指正出来,你们互相帮助互相进步!!!