改进VUE-element-admin实现自动更新token丝滑般的体验效果
vue-element-admin
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/vue-element-admin
免费下载资源
·
element-admin这套后端模板用的是模拟数据,token写死了,没提供自动更新token的方案,然而通常后端给的token是一段时间内就刷新一次的,所以在这里分享我的解决方案。直接上代码:
1、在拦截器上获取新的token并且更改VUEX的token
request.js → service.interceptors.response.use()
response => {//响应分支内
// 这样就更新了store里的token;
if (res.code === 50000) {
store.commit('SET_TOKEN',res.data.token)
setToken(res.data.token)
return Promise.reject(res)
}
}
2、每次打开路由都有一个permission.js这个中间件作为拦路虎,每次都会获取用户的权限:const { roles } = await store.dispatch(‘user/getInfo’) ,如果这里返回的错误信息那么就会执行await store.dispatch(‘user/resetToken’) 清除掉token返回登陆页面,如果取消掉删除token其实是已经实现自动更新了因为有第一步的操作,但是当token是错误的时候就是死循环了,所以不能删,我们重点放在const { roles } = await store.dispatch(‘user/getInfo’),找到 /store/modules/user.js
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
//默认使用VUEX里的token
getInfo(state.token).then(response => {
resolve(data)
}).catch(res => {
//如果返回的是刷新token就重新用新的token请求一次
if (res.code === 50000) {
getInfo(res.data.token).then(response => {
}
resolve(data)
}
})
})
}
GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
更多推荐
已为社区贡献1条内容
所有评论(0)