高手带你快速解决token持久化

为什么要进行token持久化

原因是因为现在的token一般都存储在vuex中，vuex中的state用来存储token，通过mutations里面的函数给state.token赋值，当我们刷新页面的时候，main.js会同步执行一次，刷新页面vuex里面的内容丢失了，导致接口访问异常，所以我们需要把token进行持久化。

思路

1. 在对token进行初始化的时候先从本地取一下，优先使用本地取到的值
2. 在设置token的时候除了在vuex中存一份，在本地也同步存一份
3. 在删除token的时候除了把vuex中的删除掉，把本地的也一并删除

代码 

设置一个独一无二的key

import Cookies from 'js-cookie'

const TokenKey = 'vuerenzi2_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

 在vuex中引入方法并调用

import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  namespaced: true,
  // 公共数据
  state: {
    // 本地取一下token
    token: getToken() || null
  },
  mutations: {
    // 设置token
    setToken(state, newToken) {
      state.token = newToken

      // 本地存储token
      setToken(newToken)
    },
    // 删除token
    removeToken(state) {
      state.token = null
      // 删除本地token
      removeToken()
    }
  },
  actions: {}
}

总结

token持久化的方法其实是一个固定格式，设置一个独一无二的key在vuex中本地存储数据就不会因为刷新丢失了。