zoukankan      html  css  js  c++  java
  • 刷新页面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里的变量删除

    最后再说点什么

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

    原文地址:https://segmentfault.com/a/1190000013046063

  • 相关阅读:
    java实现第七届蓝桥杯平方圈怪
    Java三大器之过滤器(Filter)的工作原理和代码演示
    spring mvc 防止重复提交表单的两种方法,推荐第二种
    防止订单重复提交
    Swagger入门教程
    BigDecimal的用法详解(保留两位小数,四舍五入,数字格式化,科学计数法转数字,数字里的逗号处理)
    很认真的聊一聊程序员的自我修养
    JAVA利用反射映射JSON对象为JavaBean
    Eclipse导出JavaDoc(并解决中文乱码问题)
    Eclipse注释模板设置详解
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9951708.html
Copyright © 2011-2022 走看看