axios-auth-refresh使用过程中遇到的坑

在最近开发的项目中，前端使用的是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