vuex持久化存储+登录注册token+导航守卫

一、前言情景：

vuex:状态管理器，可以临时存储数据，但是页面刷新后就会数据丢失，大多数情况下不需要数据的持久化存储，但是如果登录涉及到使用token就可能会需要使用持久化的存储

登录注册流程：

        1、在登陆界面填写表单，点击登录按钮后，后端接受到登用户参数会返回登录标识，即token和其他的用户信息，我们需要将用户信息存储起来，已被HTTP请求时，在请求头中携带。

        2、登录后需要使用路由导航来限制用户的操做，即有些页面不需要登录也可以操做，但是例如个人中心，就需要登录才能操做，还有在登录状态下除非退出登录，显然不能够再进入登录界面，这样符合操做逻辑。

3、在上述的步骤中都离不开token的使用，但是不能在每个用到token地方都直接去浏览器的缓存中取这样显然不方便。

二、vuex的持久化存储

      要实现持久话存储，我的方法是在这里用到一个vuex的插件："vuex-persistedstate"这个插件会把store中的数据存储在本地类似于localStorage。

//安装命令
npm i vuex-persistedstate --save

安装完成后在vuex中引入

然后进行配置：

具体代码：

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
   
  },
  mutations: {
    },
  },
  plugins: [persistedState({
//本地存储的key
    key: 'watch',
    //存储state中的值
    reducer(val) {
      return {
        userInfo: val.userInfo
      }
    }
  }
  )]
})

效果，由于我进行了配置，会存储在本地缓存中，key值为'watch'

以上就完成了vuex的持久化存储

配置参数：

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

关于vuex持久化存储的详细讲解，请移步这位大神的文章：

https://blog.csdn.net/xm1037782843/article/details/128071142

三、登录

登录需要保存token,我的登录使用本地缓存存储token，同时借助veux的持久化存储，避免了网页刷新登录掉线的问题，存在状态管理器里的token，每次数据请求的时候可以直接获取比较方便

四、使用导航守卫进行路由的限制

router.beforeEach((to, from, next) => {
  // 判断有没有登录
  let login = JSON.parse(localStorage.getItem('loginInfo'))
  if (login == null || login == undefined || !login) {
    // 如果没有登录，并且是跳转至登录页
    if (to.name == "login") {
      // 直接跳转
      next();
    } else {
      // 否则直接强制跳转至登录页
      router.push('/login').catch(err => {})
    }
  } else {
    // 如果已经登录，并且不是跳转至登录页
    if (to.name !== "login") {
      // 直接跳转
      next();
    } else {
      // 否则直接强制跳转至上一个页面
      router.push(from.path)
    }
  }
});

以上为个人项目中的代码，给大家提供一个思路，具体情况需要具体对待！