改进VUE-element-admin实现自动更新token丝滑般的体验效果

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)
			  }
		 })
	  })
  }