问题原因:刷新状态的丢失
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)
}
},