详解刷新页面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 相关文章推荐
javascript 弹出层组件(升级版)
May 12 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
Node 模块原理与用法详解
May 13 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
node.js如何操作MySQL数据库
Oct 29 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中使用XML
2006/10/09 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php命令行用法入门实例教程
2014/10/27 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
浅谈React高阶组件
2018/03/28 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
紧急迫降观后感
2015/06/15 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS