如何对Token进行持久化操作？

所谓token持久化，也就是将用户登录后的token保存到本地，不需要用户重复登录操作的功能

实现思路：

1. 用户登录成功之后，将用户的token存储到本地localstorage中

2. 在vuex初始化时，从本地添加进vuex

封装对token可能的操作，以后需要的时候可以复用

// 消除魔法字符串
const TOKEN = 'my-token'
// 1. 保存
export const saveToken = (tokenObj) => {
  localStorage.setItem(TOKEN, JSON.stringify(tokenObj))
}

// 2. 获取
export const getToken = () => {
  return JSON.parse(localStorage.getItem(TOKEN))
}

// 3. 删除
export const delToken = () => {
  localStorage.removeItem(TOKEN)
}

需要使用的时候直接用import引用即可

需要用到的语法：

1. localstorage.setItem()

2. localstorage.getItem()

3. localstorage.removeItem()

4. JSON.parse()

5. JSON.stringify()

在vuex的代码中引入自己封装的方法

+   import { saveToken, getToken } from '../utils/storage'

export default new Vuex.Store({
  state: {
    // 优先从localstroage中取出
+   tokenInfo: getToken() || {}
  },
  mutations: {
    getToken (state, newTokenInfo) {
      state.tokenInfo = newTokenInfo
    }
  },
  actions: {
    async setToken (context, userInfo) {
      try {
        // console.log(2)
        const { data: { data } } = await login(userInfo)
        // console.log(data)
        // console.log(3)
+       context.commit('getToken', data)
        // 将token存储到浏览器本地
+       saveToken(data)
        // this.$toast.success('登录成功')
      } catch (err) {
        // 将错误抛给调用这个actions的函数
        throw new Error(err)
      }
    }
  },