axios 拦截器 onRejected 不重复请求答案

【问题标题】：Axios interceptor onRejected is not repeating a requestaxios 拦截器 onRejected 不重复请求
【发布时间】：2022-11-14 00:29:20
【问题描述】：

我使用自己的拦截器来检查请求是否因令牌到期而被拒绝。

刷新令牌后。应该重复原始请求。但是，下面的代码似乎没有生效：

return axios.request(attachHeaders(originalRequest));

const baseAxios = axios.create();

baseAxios.defaults.baseURL = baseHttpUrl;

const attachHeaders = (request: AxiosRequestConfig): AxiosRequestConfig => {
  const accessToken = get(auth).access
  if (accessToken) {
    request.headers["Authorization"] = `Bearer ${accessToken}`;
  }
  return request
}

baseAxios.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;

    //check if the request was not cancelled
    if (axios.isCancel(error)) {
      return Promise.reject(error);
    }
    //check if the error is not related to token expiry
    if (error.response.status !== 401 && error.response.data?.detail !== "expired_token") {
      return Promise.reject(error);
    }

    //try to refresh the access_token
    if (await auth.refreshAccessToken()) {
      console.log("request again after token refresh")
      // I get the above log, but the line below does not seem to execute!
      console.log(attachHeaders(originalRequest))//see below
      return axios.request(attachHeaders(originalRequest));
    }

    return Promise.reject(error);
  }
)

Axios 版本：1.1.3。

console.log(attachHeaders(originalRequest))

{
    "transitional": {
        "silentJSONParsing": true,
        "forcedJSONParsing": true,
        "clarifyTimeoutError": false
    },
    "transformRequest": [
        null
    ],
    "transformResponse": [
        null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
        "Accept": "application/json, text/plain, */*",
        "Authorization": "Bearer ACCES_TOKEN_STRING"
    },
    "baseURL": "http://localhost:1000",
    "method": "get",
    "url": "users/1"
}

其他没有成功的尝试：

return auth.refreshAccessToken().then(async (ok) => {
      if (ok) {
        console.log("request again after token refresh") //gets logged
        return await axios(attachHeaders(originalRequest)) //nothing happens
      } else {
        return Promise.reject(error);
      }
    })

return auth.refreshAccessToken().then((ok) => {
      if (ok) {
        console.log("request again after token refresh") //gets logged
        return axios(attachHeaders(originalRequest)) //nothing happens
      } else {
        return Promise.reject(error);
      }
    })

【问题讨论】：

您是否尝试改用return axios.post(attachHeaders(originalRequest)).then(...);？
我不能坚持一种方法post。每个请求都是不同的。
你能检查一下你的attachHeaders控制台在从失败的响应中调用它时记录的内容吗？它实际上是否附加了标头并正确返回请求？
@brance我在问题中添加了控制台日志。
我现在唯一找到的是这个github.com/axios/axios/issues/1902#issuecomment-447419559，所以也许可以尝试将你的实现更改为await auth.refreshAccessToken().then(...)。希望能帮助到你！

标签： javascript typescript axios

【解决方案1】：

显然是用先前请求的配置AxiosRequestConfig 重复请求。必须克隆配置。修改后的配置对象不能再次使用。
错误的方法：

const attachHeaders = (request: AxiosRequestConfig): AxiosRequestConfig => {
  const accessToken = get(auth).access
  if (accessToken) {
    request.headers["Authorization"] = `Bearer ${accessToken}`;
  }
  return request
}

正确的方法：

const attachHeaders = (request: AxiosRequestConfig): AxiosRequestConfig => {
  const accessToken = get(auth).access
  if (accessToken) {
    return { ...request, headers: { ...request.headers, ["Authorization"]: `Bearer ${accessToken}` } };
  }
  return request
}

【讨论】：