处理方案

在获取到 token 之后，我们会把 token 进行缓存，而缓存的方式将会分为两种：

1. 本地缓存：LocalStorage
2. 全局状态管理：Vuex

保存在 LocalStorage 是为了方便实现 自动登录功能（token没过期的情况下）

保存在 vuex 中是为了后面在其他位置进行使用

LocalStorage

创建 utils/storage.js 文件，封装三个对应方法：

/*
* 存储数据
*  */
export const setItem = (key, value) => {
  // value分两种情况：
  // 1.基本数据类型
  // 2.复杂数据类型
    
  // 将数组、对象类型的数据转化为 JSON 字符串进行存储
  if (typeof value === 'object') {
    // 转成 JSON 格式
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}
/*
* 获取数据
*  */
export const getItem = key => {
  const data = window.localStorage.getItem(key)
  // 无论 data 是什么格式直接解析
  try {
    return JSON.parse(data)
  } catch (err) {
    return data
  }
}
/*
* 删除指定数据
*  */
export const removeItem = key => {
  window.localStorage.removeItem(key)
}

/*
* 删除所有数据
*  */
export const removeAllItem = () => {
  window.localStorage.clear()
}

Vuex

将token保存起来，不希望直接在actions保存，还需在Vuex存一份，因此在对应的mutations里进行保存。

执行前提

首先创建好state中指定初始值token、mutations中指定方法setToken。

当mutations触发的时候，将state中的token转成我们的token，同时调用setItem将token保存在localStorage。

执行步骤

登录成功时login方法，触发对应的mutations，通过this.commit('user/setToken',data.data.data.token)方法，将token保存在mutations中。

在mutations里面的setToken方法，将token放在state同时也放在localStorage。

往后创建页面或者浏览器重新进入时，token就会在localStorage中获取，否则就是空字符串。

代码实现

在 vuex 的 user 模块下，处理 token 的保存（所有和用户相关的数据都放在这个文件下，因此保存操作要在这里完成）

// 接口方法
import { login } from '@/api/sys'
// 密码加密
import md5 from 'md5'
// 登录成功后，调用该方法将token保存在本地缓存中
import { setItem, getItem } from '@/utils/storage'
// TOKEN常量
import { TOKEN } from '@/constant'

export default {
  namespaced: true,
  state: () => ({
    // 用户登录成功后，要实现自动登录效果
    // 初始化时，先获取，获取不到token就指定空字符串
    token: getItem(TOKEN) || ''
  }),
  mutations: {
    // 当mutations触发的时候
    setToken (state, token) {
      // 保存在Vuex
      state.token = token
      // 保存在本地缓存（用常量进行保存，通过常量每次去存取删对应的操作时，都使用常量）
      setItem(TOKEN, token)
    }
  },
  actions: {
    /*
    * 登录请求动作
    *  */
    login (context, userInfo) {
      const {
        username,
        password
      } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: md5(password)
        }).then(data => {
          // 成功时触发setToken方法
          // token值保存在data中
          this.commit('user/setToken', data.token)
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}