token持久化

问题原因：刷新状态的丢失

token在刷新页面就消失了。就好像在程序中定义的变量一样，在程序重新运行时，值会恢复。

持久化: 让刷新页面时，数据还在

• 1.创建 src/utils/storage.js 文件，实现三个基本的方法实现用localstorage来操作token的操作。

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

// 消除魔法字符串
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)
}

• 2.  保存token到vuex中  

import Vue from 'vue'
import Vuex from 'vuex'
+ import { setToken } from '../utils/storage.js'
Vue.use(Vuex)
export default new Vuex.Store({
  // 保存公共数据
  state: {
    tokenInfo: {}
  },
  // state中的数据要通过mutations才能修改
  mutations: {
    // mutation就是一个一个的函数, 第一个参数是当前的state, 第二个是载荷：要传入的数据
    mSetTokenInfo (state, newTokenInfo) {
      state.tokenInfo = newTokenInfo

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

• 3.获取token

 在页面刷新时优先从 localstorage中获取token

import Vue from 'vue'
import Vuex from 'vuex'
+ import { setToken，getToken } from '../utils/storage.js'
Vue.use(Vuex)
// getTokenObj() || {} : 如果getTokenObj的返回值是null，则initTokenObj是一个空对象
export default new Vuex.Store({
  // 保存公共数据
  state: {
+   tokenInfo: getToken() || {} // token信息
  },
  // state中的数据要通过mutations才能修改
  mutations: {
    // mutation就是一个一个的函数, 第一个参数是当前的state, 第二个是载荷：要传入的数据
    mSetTokenInfo (state, newTokenInfo) {
      state.tokenInfo = newTokenInfo

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