使用 Axios 拦截器实现 Access Token 自动刷新机制

import axios from 'axios';

// 假设您有一个预配置的 Axios 实例
const axiosApiInstance = axios.create({
  baseURL: '/api', // 您的 API 基础路径
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    // 初始的 Authorization header 可以在登录时设置
  }
});

// 模拟刷新 Access Token 的函数
// 在实际应用中，此函数会使用 Refresh Token 调用认证服务接口
async function refreshAccessToken() {
  console.log("尝试刷新 Access Token...");
  // 假设这里调用了一个 API 来获取新的 Access Token
  // 例如：const response = await axios.post('/auth/refresh-token', { refreshToken: storedRefreshToken });
  // const newAccessToken = response.data.accessToken;
  // 实际项目中，需要从本地存储获取 refreshToken，并更新本地存储的 accessToken

  // 模拟异步操作
  return new Promise(resolve => {
    setTimeout(() => {
      const newAccessToken = 'new_access_token_' + Date.now();
      console.log("Access Token 刷新成功:", newAccessToken);
      // 在这里您可能还需要更新本地存储的 refreshToken
      resolve(newAccessToken);
    }, 1500);
  });
}

// 响应拦截器
axiosApiInstance.interceptors.response.use(
  (response) => {
    // 如果响应成功，直接返回
    return response;
  },
  async function (error) {
    const originalRequest = error.config;

    // 检查是否为 403 错误且未重试过
    // error.response 存在且状态码为 403，并且 originalRequest._retry 为 false (未重试过)
    if (error.response && error.response.status === 403 && !originalRequest._retry) {
      originalRequest._retry = true; // 标记为已重试

      try {
        // 尝试刷新 Access Token
        const newAccessToken = await refreshAccessToken();

        // 更新 Axios 实例的默认授权头部，影响所有后续请求
        axiosApiInstance.defaults.headers.common['Authorization'] = 'Bearer ' + newAccessToken;

        // 更新原始请求的授权头部，以便重新发送
        originalRequest.headers['Authorization'] = 'Bearer ' + newAccessToken;

        // 重新发送原始请求
        return axiosApiInstance(originalRequest);
      } catch (refreshError) {
        console.error("Access Token 刷新失败:", refreshError);
        // 如果刷新失败，或者 refreshAccessToken 函数内部决定重定向，
        // 则可以导向登录页面，并清除本地存储的令牌信息
        // window.location.href = '/login?error=session_expired';
        return Promise.reject(refreshError); // 拒绝Promise，将错误传递下去
      }
    }

    // 对于其他错误或已重试的 403 错误，直接拒绝Promise
    return Promise.reject(error);
  }
);

// 示例用法
async function fetchData() {
  try {
    // 假设在某些情况下，需要手动设置 Authorization header，或者它已经在登录时设置
    // axiosApiInstance.defaults.headers.common['Authorization'] = 'Bearer ' + 'expired_access_token';
    const response = await axiosApiInstance.get('/protected-data');
    console.log("获取受保护数据成功:", response.data);
  } catch (error) {
    console.error("获取受保护数据失败:", error.response ? error.response.data : error.message);
  }
}

// 模拟一个需要 Access Token 的请求
// fetchData();