token持久化

1.问题

页面刷新，token丢失。

2.解决思路

1.用户登录后，保存token到vuex，同时也保存一份到本地存储localStorage

2.vuex容器初始化时（页面刷新时），使用本地存储中的值

3.步骤

3.1 封装localstorage存储模块

// 封装localstorage对token(对象)的三个操作
// 1. 保存  // 2. 获取  // 3. 删除
// JSON

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

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

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

3.2 保存token

1.保存token到vuex

2.保存token到本地存储

import { saveToken, getToken } from '../untils/storage'

mutations: {
    setTokenInfo (state, newTokenInfo) {
      // 保存token到vuex
      state.tokenInfo = newTokenInfo

      // 保存到本地localstorage
      saveToken(newTokenInfo)
    }
  },

3.2 获取token

  state: {
      // getTokenObj() || {} : 如果getTokenObj的返回值是null，则initTokenObj是一个空对象
      tokenInfo: getToken() || {}
  },