场景:用户登录需要携带 token 向服务端获取数据,但是如果将 token 存储在Vuex当中,刷新页面时 token 将被清空,导致服务器无法根据 token 返回对应的用户数据
原因:Vuex是无法持久化存储的
解决方法:借助 localStorage 存储 token 实现持久化存储
// 在Vuex文件中
// action内容:
// 登录业务
async userLogin({ commit }, data) {
let res = await reqLogin(data)
// 服务器下发的token很重要,前台需要存储信息,在之后的请求中通过token向服务器要用户信息
if(res.code == 200){
// 用户已经登录成功且成功获取到token
commit('USERLOGIN',res.data.token)
// 持久化存储token
localStorage.setItem('Token',res.data.token)
return 'ok'
}else {
return Promise.reject(new Errow('faile'))
}
}
登录之后,想要获取用户信息,就需要携带服务器在登录后返回的 token ,再向服务器发送获取用户信息的请求。即在请求头中携带 token
// Vuex文件中
// state部分
const state = {
code: '',
token:localStorage.getItem('Token'),
userInfo:{}
}
通过给Vuex原始 token 字段设置读取本地存储的 token ,在本地存储还没有存储 token 时,其值为 null,当有本都存储之后,就会调用该方法从本地存储中获取 token
在发送请求获取用户数据时,请求头就可以从 Vuex 的 token 字段获取token值了,此时的 token 已经实现了持久化存储