Axios 1.1.3版本Token刷新拦截器失效问题求助

问题分析 #

从你的代码和描述来看，拦截器逻辑框架没问题，但Axios从v0.27升级到v1.x后，几个细节变化导致拦截器失效：

• async函数与Promise链式调用混用：错误处理函数是async，但内部又嵌套.then()，容易导致Promise状态处理混乱，重试请求的时机出现偏差。
• Headers设置方式的隐性变化：Axios v1.x中直接修改instance.defaults.headers.common后，已存在的originalRequest配置可能无法同步更新，导致重试请求仍用旧token。
• Retry标记的识别延迟：Promise嵌套可能导致originalRequest._retry标记未及时被拦截器识别，引发重复刷新请求。

修复后的代码 #

import axios from "axios";
import router from "@/router";
import store from "@/store/index";

const instance = axios.create({
  baseURL: "http://localhost:3000",
});

// 新增请求拦截器：每次请求自动携带最新token，比直接修改defaults更可靠
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token") || store.state.token;
    if (token) {
      config.headers["authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    // 排除refreshToken请求本身，避免循环拦截
    if (
      originalRequest.url !== "users/refreshToken" &&
      error.response?.status === 401 &&
      !originalRequest._retry
    ) {
      originalRequest._retry = true;
      try {
        // 用async/await替代链式调用，避免状态混乱
        const response = await instance.get("users/refreshToken", { withCredentials: true });
        const token = response.data.accessToken;
        
        // 更新存储与状态
        store.state.token = token;
        localStorage.setItem("token", token);
        
        // 重新发起原请求，请求拦截器会自动带上新token
        return instance(originalRequest);
      } catch (refreshError) {
        // 刷新失败，跳转登录页
        store.commit("logout");
        localStorage.removeItem("token");
        router.push({ name: "login", params: { error: "refreshToken" } });
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

export default instance;

关键修改点说明 #

1. 新增请求拦截器：每次请求自动从localStorage或store取最新token并设置headers，替代直接修改instance.defaults.headers.common的方式，确保所有请求（包括重试的原请求）都能拿到有效token，这是Axios v1.x中更可靠的全局headers配置方案。
2. 统一用async/await处理异步：去掉.then()链式调用，改用try/catch逻辑，避免Promise嵌套导致的状态丢失，确保重试请求在token更新完成后才发起。
3. 优化异常判断：给error.response加上可选链?.，避免网络错误时因error.response为undefined引发报错。
4. 简化重试逻辑：请求拦截器会自动注入新token，无需手动修改originalRequest.headers，减少出错环节。

额外注意事项 #

• 建议通过Vuex的mutation修改store.state.token，而非直接赋值，确保状态更新符合规范。
• 确认后端允许跨域请求携带凭证，且refreshToken接口的cookie配置正常。

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