前提:我们都知道在登陆的时候后台会返回一串字符串,也就是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)