Axios拦截器中请求头更新的问题分析与解决方案

问题背景

在使用Axios进行HTTP请求时，开发者经常会遇到需要在拦截器中动态更新请求头的情况。特别是在处理身份验证时，当访问令牌过期后需要刷新令牌并重新发起请求的场景。然而，在实际开发中，很多开发者发现即使在拦截器中更新了请求头，重试的请求却没有使用新的头信息。

核心问题分析

这个问题通常出现在以下场景：

1. 开发者使用Axios的响应拦截器来处理401未授权错误
2. 在拦截器中获取新的访问令牌后，尝试更新请求配置中的Authorization头
3. 重新发起请求时，发现请求头没有被正确更新

解决方案

通过分析Axios的源码和实际测试，我们发现正确的处理方式应该是：

1. 确保在更新请求头时创建新的headers对象
2. 使用标准的JavaScript对象赋值方式更新头信息
3. 避免直接修改原有的headers引用

代码实现

const handleRefreshOnExpiredToken = async (error) => {
  if (axios.isAxiosError(error)) {
    const config = error.config;
    const httpStatus = error.response?.status;

    if (httpStatus === 401 && config && !config._retried) {
      config._retried = true;
      
      // 获取新令牌
      const newToken = await refreshToken();
      
      // 正确更新请求头的方式
      config.headers = {
        ...config.headers,
        Authorization: `Bearer ${newToken}`
      };
      
      return axiosPrivate.request(config);
    }
  }
  return Promise.reject(error);
};

关键点说明

1. headers对象更新：必须创建一个新的headers对象，而不是直接修改原有对象。这是因为Axios内部可能对headers进行了特殊处理。

2. _retried标志：使用这个自定义标志可以防止无限重试循环，确保每个请求只重试一次。

3. 错误处理：确保在所有错误路径上都返回Promise.reject，避免拦截器中断请求链。

最佳实践建议

1. 对于身份验证相关的拦截器，建议同时实现请求和响应拦截器
2. 在请求拦截器中设置初始授权头
3. 在响应拦截器中处理令牌刷新逻辑
4. 使用TypeScript时，可以扩展AxiosRequestConfig类型来添加自定义属性如_retried

总结

Axios拦截器是处理HTTP请求和响应的强大工具，但在更新请求头时需要特别注意对象的引用问题。通过创建新的headers对象并正确合并原有头信息，可以确保重试的请求使用最新的授权令牌。这种模式不仅适用于身份验证场景，也可以推广到其他需要动态更新请求头的业务需求中。