token-处理-持久化

token-处理-持久化

目标

现在的token是保存在vuex中，而页面刷新之后，vuex的内容丢失了，将会导致接口访问异常。所以我们需要对token做持久化处理： 刷新页面之后token不丢失。

思路

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

代码

准备工具方法

在**utils/auth.js中，基础模板已经为我们提供了获取token，设置token，删除token**这三个方法，完全可以直接使用。

只需要将存储的key放置成特定值即可

import Cookies from 'js-cookie'
const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key
export function getToken() {
  return Cookies.get(TokenKey)
}

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

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

在vuex中引入方法，并调用

在store/modules/user.js文件中，

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: {}
}