时间戳

首页 > 解决方案 > 如何将自定义属性添加到 axios 配置？

typescript - 如何将自定义属性添加到 axios 配置？

问题描述

如果过期，这个拦截器应该刷新我的令牌。

declare module "axios" {
  export interface AxiosRequestConfig {
    _retry?: boolean;
  }
}
axios.interceptors.response.use(
  (res) => res,
  (error: AxiosError) => {
    const originalRequest = error.config;
    console.log(originalRequest._retry); // always undefined
    if (error?.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      return axios
        .post("/auth/refresh-token", {}, { withCredentials: true })
        .then((res) => {
          if (res.status === 201) {
            return axios(originalRequest);
          }
        })
    }
    return Promise.reject(error);
  }
);

关键是_retry我添加到请求配置中的属性，因此它应该防止无限循环。但相反的事情发生了！它创建了一个无限循环，因为_retryalways is undefined。

我在他们的 Github 页面上发现了一些问题，但没有找到解决方案。

编辑： Su Yu 用最新版本的 axios 尝试了这段代码，它成功了。所以也许这是一个错误。我在 axios 存储库中创建了一个问题： https ://github.com/axios/axios/issues/3920

我有一个问题：如果刷新令牌请求也返回 401 错误怎么办？

最终编辑：最后，我解决了它。我在无限循环中存货，因为如果刷新令牌过期，刷新令牌请求会返回 401 错误。所以我将其更改为 400，一切都按预期工作。我现在要打自己！

标签： typescriptaxios

解决方案

你用的是哪个版本的axios？似乎 axios 在 0.19.2 上解决了这个问题。您可以检查拉取请求Fixing custom config options。

我已经尝试过最新版本（0.21.1）的 axios，自定义配置工作正常。

推荐阅读