需求
最近遇到个需求:前端登录后,后端返回token和refresh_token,当token过期时用旧refresh_token去获取新的token,前端需要做到无痛刷新token,即请求刷新token时要做到用户无感知。
需求解析
当用户发起一个请求时,判断token是否已过期,若已过期则先调refreshToken接口,拿到新的token后再继续执行之前的请求。
这个问题的难点在于:当同时发起多个请求,而刷新token的接口还没返回,此时其他请求该如何处理?接下来会循序渐进地分享一下整个过程。
实现
这里会使用axios来实现,以上方法是请求后拦截,所以会使用axios.interceptors.response.use()方法。
首先说明一下,项目中的token是存在localStorage中的。
如何防止多次刷新token 如果refreshToken接口还没返回,此时再有一个过期的请求进来,上面的代码就会再一次执行refreshToken,这就会导致多次执行刷新token的接口,因此需要防止这个问题。我们可以在request.js中用一个flag来标记当前是否正在刷新token的状态,如果正在刷新则不再调用刷新token的接口。
这样子就可以避免在刷新token时再进入方法了。但是这种做法是相当于把其他失败的接口给舍弃了,假如同时发起两个请求,且几乎同时返回,第一个请求肯定是进入了refreshToken后再重试,而第二个请求则被丢弃了,仍是返回失败,所以接下来还得解决其他接口的重试问题。
同时发起两个或以上的请求时,其他接口如何重试 两个接口几乎同时发起和返回,第一个接口会进入刷新token后重试的流程,而第二个接口需要先存起来,然后等刷新token后再重试。同样,如果同时发起三个请求,此时需要缓存后两个接口,等刷新token后再重试。由于接口都是异步的,处理起来会有点麻烦。
当第二个过期的请求进来,token正在刷新,我们先将这个请求存到一个数组队列中,想办法让这个请求处于等待中,一直等到刷新token后再逐个重试清空请求队列。 那么如何做到让这个请求处于等待中呢?为了解决这个问题,我们得借助Promise。将请求存进队列中后,同时返回一个Promise,让这个Promise一直处于Pending状态(即不调用resolve),此时这个请求就会一直等啊等,只要我们不执行resolve,这个请求就会一直在等待。当刷新请求的接口返回来后,我们再调用resolve,逐个重试。最终代码:
import axios from 'axios' import { Loading, Message, MessageBox } from 'element-ui' import api from './api' import { getToken, setToken, removeToken, getRefreshToken } from '../utils/cookies' let UserModule = { RefreshToken: (data) => { setToken('Bearer ' + data.access_token, data.refresh_token) } } // 是否正在刷新的标记 let isRefreshing = false // 重试队列,每一项将是一个待执行的函数形式 let retryRequests = [] const request = axios.create({ baseURL: api.baseUrl, timeout: 50000, withCredentials: true // cookie跨域必备 }) // http request 拦截器 Request request.interceptors.request.use( (config) => { if (getToken()) { config.headers['Authorization'] = getToken() } return config }, (error) => { Promise.reject(error) } ) // http response 拦截器 Response request.interceptors.response.use( (response) => { // code == 0: 成功 const res = response.data if (res.code !== 0) { if (res.message) { Message({ message: res.message, type: 'error', duration: 5 * 1000 }) } return Promise.reject(res) } else { return response.data } }, (error) => { if (!error.response) return Promise.reject(error) // 根据refreshtoken重新获取token // 5000系统繁忙 // 5001参数错误 // 1003该用户权限不足以访问该资源接口 // 1004访问此资源需要完全的身份验证 // 1001access_token无效 // 1002refresh_token无效 if (error.response.data.code === 1004 || error.response.data.code === 1001) { const config = error.config if (!isRefreshing) { isRefreshing = true return getRefreshTokenFunc() .then((res) => { // 重新设置token UserModule.RefreshToken(res.data.data) config.headers['Authorization'] = getToken() // 已经刷新了token,将所有队列中的请求进行重试 // @ts-ignore retryRequests.forEach((cb) => cb(getToken())) // 重试完清空这个队列 retryRequests = [] // 这边不需要baseURL是因为会重新请求url,url中已经包含baseURL的部分了 config.baseURL = '' return request(config) }) .catch(() => { resetLogin() }) .finally(() => { isRefreshing = false }) } else { // 正在刷新token,返回一个未执行resolve的promise return new Promise((resolve) => { // 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行 // @ts-ignore retryRequests.push((token: any) => { config.baseURL = '' config.headers['Authorization'] = token resolve(request(config)) }) }) } } else if (error.response.data.code === 1002) { resetLogin() } else { Message({ message: error.response.data.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } } ) // 刷新token的请求方法 function getRefreshTokenFunc() { let params = { refresh_token: getRefreshToken() || '' } return axios.post(api.baseUrl + 'auth-center/auth/refresh_token', params) } function resetLogin(title = '身份验证失败,请重新登录!') { if (window.location.href.indexOf('/login') === -1) { MessageBox.confirm(title, '退出', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { removeToken() location.reload() // To prevent bugs from vue-router }) } } /** * []请求 * @param params 参数 * @param operation 接口 */ function customRequest(url: string, method: any, data: any) { // service.defaults.headers['Content-Type']=contentType let datatype = method.toLocaleLowerCase() === 'get' ? 'params' : 'data' return request({ url: url, method: method, [datatype]: data }) } export { request, customRequest }
文章来源:https://juejin.im/post/5dde55286fb9a071a639e85f
超值推荐:
阿里云双12已开启,云产品冰点价,新用户专享1折起,1核2G云服务器仅需89元/年,229元/3年。买了对于提升技术或者在服务器上搭建自由站点,都是很不错的,如果自己有实际操作,面试+工作中肯定是加分项。(老用户可以用家人或朋友的账号购买,真心便宜&划算)
可“扫码”或者“点击购买 "