一、Token保存

1.  分析

       登陆功能之后，从后端获取到了token值，在接下来的其他请求中，接口服务器都会去检查token值，这里我们提前把它保存到统一管理公共状态的 vuex中

 2.将token保存到vuex中

  使用vuex的基本逻辑：数据放在state中，要修改数据则调用mutations

1. 先在state中补充定义token

2. 同时，要提供对应的用来修改token的mutation，以方便在用户登陆成功之后，去设置token。

  整体思路如下

 （1）初始化Token值（在vuex中）

const state = {
  token: null // 默认为null
}

 （2）在mutation中修改state中token的值

// 修改状态
const mutations = {
  // 设置token
  setToken(state, newToken) {
    state.token = token // 设置token
  },
  // 删除token
  removeToken(state) {
    state.token = null // 删除vuex的token
  }
}

 注意：

使用vuex的基本流程：

1. 定义数据。 在state中定义。

2. 定义mutations。用它来操作数据。

3. 在组件中调用mutations。this.$store.commit('模块名/mutation的名字'， 参数)

二、Token值持久化

1.目标

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

2.思路

1. 在对token进行初始化的时候先从本地取一下，优先使用本地取到的值

2. 在设置token的时候除了在vuex中存一份，在本地也同步存一份

3. 在删除token的时候除了把vuex中的删除掉，把本地的也一并删除

3.代码

准备 获取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中引入方法，并调用

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