当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解刷新页面vuex数据不消失和不跳转页面的解决

详解刷新页面vuex数据不消失和不跳转页面的解决

2018年02月09日  | 移动技术网IT编程  | 我要评论

热血智辅,刘德华的英文名字,5294

先说点什么

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里的变量删除

最后再说点什么

希望本文可以给你提供一些帮助,这是我最高兴的,觉得我有写的不对或者有问题的地方也请帮我指正出来,大家互相帮助互相进步!!!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网