前提：我們都知道在登陸的時候后臺會返回一串字符串，也就是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 = usergetSetToken(key, user) // localStorage 中只能存儲 JSON 字符串，且以鍵值對方式存儲， 需要序列化 }},actions: {},modules: {} })

然后在登陸頁面調用 Vuex 中的 mutation中的方法 來對從后臺獲取的token進行保存

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

總結

以上是生活随笔為你收集整理的身份令牌toKen Vuex + localStorage结合存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。