如何阻止Axios刷新令牌流程中xhr.js 401错误显示在控制台？

要阻止token过期时的401错误出现在控制台，核心是在Axios的响应拦截器里拦截这个特定的401请求，不直接抛出错误，而是先完成token刷新和请求重试，只有当刷新失败时再抛出错误。具体方案如下：

步骤1：创建Axios实例并配置基础参数 #

先单独创建一个Axios实例管理接口请求，避免影响全局Axios配置：

import axios from 'axios';

// 自定义Axios实例，替换为你的接口基地址
const api = axios.create({
  baseURL: '/your-api-base-url',
  timeout: 10000,
});

步骤2：实现token刷新逻辑 #

编写专门的刷新token函数，注意这个请求要避开后续的拦截器处理：

// 刷新access token，返回新的token
async function refreshAccessToken() {
  try {
    const response = await axios.post('/api/refresh-token', {
      refreshToken: localStorage.getItem('refreshToken'),
    });
    const newAccessToken = response.data.accessToken;
    // 保存新token到本地
    localStorage.setItem('accessToken', newAccessToken);
    return newAccessToken;
  } catch (err) {
    // 刷新失败直接跳登录页
    window.location.href = '/login';
    throw err;
  }
}

步骤3：配置响应错误拦截器处理401 #

在响应拦截器里捕获目标401错误，执行刷新和重试逻辑：

// 响应错误拦截器
api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    // 过滤条件：是401错误、不是刷新token的请求、未重试过
    if (
      error.response?.status === 401 &&
      originalRequest.url !== '/api/refresh-token' &&
      !originalRequest._retry
    ) {
      // 标记已重试，防止无限循环
      originalRequest._retry = true;

      try {
        const newToken = await refreshAccessToken();
        // 更新请求头的token
        api.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
        originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
        // 重试原请求，返回重试后的结果
        return api(originalRequest);
      } catch (refreshErr) {
        // 只有刷新失败时，才把错误抛到控制台
        return Promise.reject(refreshErr);
      }
    }

    // 非目标401错误或重试失败，正常抛出错误
    return Promise.reject(error);
  }
);

// 请求拦截器：自动给请求添加token
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('accessToken');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

关键说明 #

• 用originalRequest._retry标记避免无限重试：如果刷新token的请求也返回401（比如refresh token过期），不会再次进入拦截逻辑。
• 排除刷新token的请求：确保刷新接口本身的401错误能正常抛出，触发登录跳转。
• 正常的token过期重试流程不会在控制台输出401错误，只有刷新失败时才会显示错误。

内容的提问来源于stack exchange，提问作者amirhosein karimi