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


Posted in Javascript onJanuary 30, 2018

先说点什么

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

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

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

最后再说点什么

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
vuex 的简单使用
Mar 22 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 #Javascript
微信小程序数据存储与取值详解
Jan 30 #Javascript
Vue精简版风格概述
Jan 30 #Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 #Javascript
vue2.0之多页面的开发的示例
Jan 30 #Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 #Javascript
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
You might like
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python读取mp3中ID3信息的方法
2015/03/05 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
django做form表单的数据验证过程详解
2019/07/26 Python
django迁移数据库错误问题解决
2019/07/29 Python
将python安装信息加入注册表的示例
2019/11/20 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python3注册全局热键的实现
2020/03/22 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
合作意向书格式及范文
2014/03/31 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
重阳节标语大全
2014/10/07 职场文书
培训师岗位职责
2015/02/14 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python