持久化处理token
- 为什么我们要做持久化?
vuex基于内存管理的工具,内存每次刷新浏览器都会进行初始化 token丢失问题
如果想要使用vuex管理数据的便捷,而且又想刷新时还不丢失 localStorage和cookie持久化缓存
- 如何实现持久化呢?
这里小编使用的是vuex和cookie
专门给cookie封装了函数
// 专门用来操作cookie的方法包
// 内部封装繁琐的操作 参数处理 暴露函数
import Cookies from 'js-cookie'
// 定义一个变量
const TokenKey = 'token'
// 获取token方法
export function getToken() {
return Cookies.get(TokenKey)
}
// 设置token方法
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
我们是去vuex里设置token的,因为很多地方都会用到token,并且分了模块
- 获取到token
- 一式两份,在vuex存入一份,本地存入一份( localStorage和cookie)
- 初始化的优先从本地取一下,取到就以渠道的为主
- 取不到就按照格式初始化为空串、空对象
import { setToken, getToken } from '@/utils/auth'
export default {
namespaced: true,
// vuex中的模块也是可能进行复用的 为了复用的时候 互不影响 采用同样的函数执行 return对象的形式
state: () => ({
token: getToken() || '',
}),
mutations: {
setToken(state, token) {
// 存入vuex
state.token = token
// 存入本地
setToken(token)// cookie
}
},
actions: {
asyncSetToken(ctx, token) {
// 发送请求登录 获取token
return new Promise((resolve, reject) => {
//用了Promise对象,主要是为了防止还没获取token值就登录跳转了
login(data).then(res => {
// console.log(res)
ctx.commit('setToken', res.data)//token值
resolve()
})
})
}
}
}
在合适位置使用actions函数,发送请求,获得token值即可。