在最近开发的项目中，前端使用的是vue+element套件，使用axios调用后端API接口。这两天着手对原有jwt token过期后，在一定时限内使用refresh_token进行续期的机制进行优化。查阅了很多资料后，最终完成优化，但在此过程中遇到不少坑，特此记录，以备后查，也希望遇到同类问题的程序猿们提供一种思路。
在查阅的资料中，大部分解决思路都是在request.js的 request.interceptors.response中对401 error进行拦截后，请求后端refreshToken接口来达到token续期的目的。同时为了避免同一时间多次调用该接口，使用全局状态位；为了优化用户感知，使用requests[] 缓存refreshToken期间被拦截的请求，token刷新之后重新发起请求。
这种方法可以达到最终效果，但实现起来比较复杂。在实际实现过程中，很多细节容易出问题。 这时候发现了现成的npm 组件：axios-auth-refresh，容易出现问题的地方它已经为我们考虑和解决了，所以直接拿来用。
主要代码：
axios: 0.8.1，axios-auth-refresh: 2.2.8
import axios from 'axios'
import createAuthRefreshInterceptor from 'axios-auth-refresh'
const request = axios.create({
baseURL: process.env.BASE_API_PATH
})
const refreshAuthLogic = (failedRequest) => {
return request.post('/access/refreshToken', {
refreshCode: Storage.getRefreshCode()
})
.then(tokenRefreshResponse => {
failedRequest.response.config.headers['token'] = tokenRefreshResponse.data.token
Storage.setToken(tokenRefreshResponse.data.token)
return Promise.resolve()
})
.catch(error => {
console.log('登录过期')
// 退出登录逻辑
return Promise.reject(error)
})
}
createAuthRefreshInterceptor(request, refreshAuthLogic, { pauseInstanceWhileRefreshing: true, skipAuthRefresh: true })
export default request
以上代码经过调试后存在以下问题：
一、如果使用 request.interceptors.response.use(error=>{})对响应进行拦截后，在 error.response.status===401时要注意返回值
error => {
if (error.response) {
if (error.response.status === 401) {
return Promise.reject(error) // 此处要注意error参数，如果写成 return Promise.reject()，则后面的刷新逻辑执行不到
} else { // 其他处理逻辑
return Promise.reject()
}
} else {
return Promise.reject()
}
}
二、 axios-auth-refresh使用2.2.8版本时， refreshAuthLogic方法中API接口地址如果为相对路径、接口调用根路径不是'/'（如：http://127.0.0.1:8888/test），最终 /access/refreshToken接口被调用的完整路径会变为 http://127.0.0.1:8888/test/test/ access/refreshToken，导致404
解决办法： axios和 axios-auth-refresh使用最新版本，如：
axios: 0.24.0，axios-auth-refresh: 2.3.1
