身份令牌toKen Vuex + localStorage结合存储

前提：我们都知道在登陆的时候后台会返回一串字符串，也就是token, 也是我们常说的身份令牌， 在后续的请求中只有在请求头中携带了token才会被允许访问后台数据，因此如何存储token就显得尤为重要。
如果直接将 ToKen 存储在 Vuex容器中，
好处： 1. 获取方便
2.响应式
缺点： 只要页面一刷新就没数据了。
为了持久化，还需要把 Token 放到本地存储（localStorage–除非手动清除，永久存在）

• 持久化
• 所以，我们采取 Vuex 和 本地存储相结合的方式 来存储 Token
  我们可以直接将 操作Token 封装成一个模块，方便后续使用：

export const getToken = key => {
    
    
  const data = window.localStorage.getItem(key)
  console.log(data)
  try {
    
    
    return JSON.parse(data)
  } catch (err) {
    
    
    return null
  }
}

export const getSetToken = (key, value) => {
    
    
  if (typeof value === 'object') {
    
    
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

export const remove = key => {
    
    
  window.localStorage.removeItem(key)
}

然后在 store文件夹下 index.js文件中来调用 封装方法

import Vue from 'vue'
import Vuex from 'vuex'
import {
    
     getToken, getSetToken } from '@/utils/token' // 按需导入要使用的方法
Vue.use(Vuex)
const key = 'DATA_USER' //  localStorage 中是以键值对形式存储的 在这定义一个key
export default new Vuex.Store({
    
    
  state: {
    
    
    user: getToken(key) // state公共数据源 所有组件均可访问 将token 保存在 state 中 ， // 因为要后续从 localStorage 中获取token 保存到 user 中 ，所以需要反序列化
  },
  mutations: {
    
    
    setUser(state, user) {
    
    
      state.user = user
      getSetToken(key, user) // localStorage 中只能存储 JSON 字符串，且以键值对方式存储， 需要序列化 
    }
  },
  actions: {
    
    },
  modules: {
    
    }
})

然后在登陆页面调用 Vuex 中的 mutation中的方法 来对从后台获取的token进行保存

   this.$store.commit('setUser', res.data.data)