通过refreshToken实现token的无感刷新

通过refreshToken实现token的无感刷新

token 在本地保存的时间一般都很短暂，当我们toekn失效的时候就需要重新登录这样会使用户的体验非常不好，而我们在做登录的时候可以在后台获取用于刷新 token 的 refreshtoken 数据,我们拿到这个数据可以在token失效的时候重新发送请求获取最新的 token 从而达到无感刷新token的效果

在vue中的操作具体如下：

1. 在vue中通常我们会把一些公用的数据存放在store中

		//  在 state中 定义 refreshToken 在localStorage中获取
		state(){
		return {
			const refreshToken = localStorage.getItem('refreshToken的字段名')
		}
		},
		
		//  在mutations 中定义更改 refresh_token
		mutations:{
			获取refreshtoken的函数名(state , refreshToken){
			//修改数据
			state.refreshToken = refreshToken
			//同步本地数据
			localStorage.setItem('refreshToken的字段名', refreshToken)
		}
		}	 

2.在登录的时候获取并存储refreshToken到本地

		// 调用在store中定义好的更改refreshToken 的方法
		this.$store.commit('模块名/方法名' , 通过登录接口获取的refreshtoken的值)   

3. 定义refreshToken 向后台获取的API接口

4. 我们在项目中发送请求都会做请求拦截与响应的拦截，而我们的refreshToken 需要在响应拦截的错误响应中调用定义好的API接口通过refreshToken 获取最新的token并同步到本地中重新发送请求

		1. 调用接口传入获取到的 refreshToken 
		2. 调用定义好的更新token的方法，把最新的token保存进去
		3. return axios实例（err.config）