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 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐