前端 Token 无感刷新：基于 Axios 拦截器的完整实现方案

npm install axios

import axios from "axios";

// 创建 Axios 实例
const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 10000,
});

// 存储 Token 和刷新 Token
let token = localStorage.getItem("token") || "";
let refreshToken = localStorage.getItem("refreshToken") || "";

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 如果 Token 存在，添加到请求头
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;

    // 如果 Token 过期且未发起过刷新请求
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true; // 标记为已发起刷新请求

      try {
        // 发起刷新 Token 的请求
        const response = await axios.post("/refresh-token", {
          refreshToken,
        });

        // 更新 Token 和刷新 Token
        const { token: newToken, refreshToken: newRefreshToken } = response.data;
        token = newToken;
        refreshToken = newRefreshToken;
        localStorage.setItem("token", newToken);
        localStorage.setItem("refreshToken", newRefreshToken);

        // 更新请求头中的 Token
        originalRequest.headers.Authorization = `Bearer ${newToken}`;

        // 重新发起原始请求
        return instance(originalRequest);
      } catch (refreshError) {
        // 刷新 Token 失败，跳转到登录页
        localStorage.removeItem("token");
        localStorage.removeItem("refreshToken");
        window.location.href = "/login";
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  }
);

export default instance;

import axiosInstance from "./axiosInstance";

const fetchData = async () => {
  try {
    const response = await axiosInstance.get("/data");
    console.log(response.data);
  } catch (error) {
    console.error("请求失败", error);
  }
};

fetchData();

const isTokenExpired = (token) => {
  const payload = JSON.parse(atob(token.split(".")[1]));
  const exp = payload.exp * 1000; // 转换为毫秒
  return Date.now() >= exp - 5 * 60 * 1000; // 提前 5 分钟刷新
};

instance.interceptors.request.use(
  (config) => {
    if (token && isTokenExpired(token)) {
      // 发起刷新 Token 的请求
      refreshToken()
        .then((newToken) => {
          token = newToken;
          localStorage.setItem("token", newToken);
          config.headers.Authorization = `Bearer ${newToken}`;
        })
        .catch(() => {
          localStorage.removeItem("token");
          window.location.href = "/login";
        });
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);