自动刷新访问令牌：基于Axios拦截器的实现指南

import axios from 'axios';

// 创建一个Axios实例，便于管理和配置
const axiosApiInstance = axios.create({
  baseURL: 'YOUR_API_BASE_URL', // 替换为你的API基础URL
  headers: {
    'Content-Type': 'application/json',
    // 初始时可能没有Authorization头，或者从本地存储加载
  },
});

// 模拟一个用于刷新访问令牌的函数
// 实际应用中，此函数会使用refresh token向认证服务器请求新的access token
async function refreshAccessToken() {
  try {
    // 假设你的刷新令牌存储在某个地方，例如localStorage
    const refreshToken = localStorage.getItem('refreshToken');
    if (!refreshToken) {
      throw new Error('No refresh token found');
    }

    // 实际的API调用，用于获取新的access token
    // 例如：
    const response = await axios.post('YOUR_AUTH_REFRESH_ENDPOINT', {
      refreshToken: refreshToken,
    });

    const { accessToken: newAccessToken, refreshToken: newRefreshToken } = response.data;

    // 更新本地存储的令牌
    localStorage.setItem('accessToken', newAccessToken);
    if (newRefreshToken) { // 如果刷新令牌也可能更新
      localStorage.setItem('refreshToken', newRefreshToken);
    }

    return newAccessToken;
  } catch (error) {
    console.error('Failed to refresh access token:', error);
    // 在这里可以处理刷新失败的情况，例如清除所有令牌并重定向到登录页
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    window.location.href = '/login'; // 重定向到登录页
    throw error; // 抛出错误以便拦截器后续处理
  }
}

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

    // 检查是否是403错误，并且该请求之前没有被重试过
    // _retry 标志用于防止无限循环重试
    if (error.response && error.response.status === 403 && !originalRequest._retry) {
      originalRequest._retry = true; // 标记为已重试

      try {
        const newAccessToken = await refreshAccessToken();
        // 更新Axios实例的默认Authorization头，以便后续请求使用新令牌
        axiosApiInstance.defaults.headers.common['Authorization'] = 'Bearer ' + newAccessToken;
        // 更新原始请求的Authorization头，然后重新发送该请求
        originalRequest.headers['Authorization'] = 'Bearer ' + newAccessToken;
        return axiosApiInstance(originalRequest); // 使用更新后的配置重新发送原始请求
      } catch (refreshError) {
        // 刷新令牌失败，可能是刷新令牌也过期了，或者其他错误
        // 此时应重定向用户到登录页面
        console.error('Token refresh failed, redirecting to login:', refreshError);
        // refreshAccessToken函数内部已经处理了重定向，这里可以再次确认
        // 或者抛出错误，让调用方处理
        return Promise.reject(refreshError);
      }
    }

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

// 导出Axios实例供应用使用
export default axiosApiInstance;

// 在应用启动时，可以从localStorage加载access token并设置到axiosApiInstance
const storedAccessToken = localStorage.getItem('accessToken');
if (storedAccessToken) {
  axiosApiInstance.defaults.headers.common['Authorization'] = 'Bearer ' + storedAccessToken;
}