React Query / Axios 如何当 token 过期后自动刷新 token ?

React Query 和 Axios 都是流行的前端开发工具，React Query 用于数据同步，而 Axios 是一个 HTTP 客户端。在实现 token 自动刷新时，我们通常会使用 Axios 的拦截器（interceptors）以及 React Query 的某些特性来完成这个任务。以下是一个例子，展示了如何在 token 过期后自动刷新 token：

首先，我们需要设置 Axios 拦截器来处理请求和响应。在发起请求前，我们检查 token 是否存在，如果存在则附加到请求头中。在收到响应后，我们检查是否因为 token 过期而出现了错误（比如 HTTP 401 Unauthorized 错误）。如果检测到 token 过期，我们可以发起一个刷新 token 的操作，并在成功刷新后重试原来的请求。

下面是一个简化的代码示例：

javascript
import axios from 'axios';
import { queryClient } from './reactQuerySetup'; // 假设你已经设置了 React Query 的 queryClient

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://your.api.endpoint',
  // 其他配置
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('accessToken'); // 或者其他存储 token 的方式
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        // 假设你有一个用于刷新 token 的 API endpoint
        const refreshToken = localStorage.getItem('refreshToken');
        const response = await axiosInstance.post('/refresh-token', { refreshToken });
        const { accessToken } = response.data;
        localStorage.setItem('accessToken', accessToken); // 更新本地存储的 token

        // 使用新的 token 重试原来的请求
        originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
        return axiosInstance(originalRequest);
      } catch (refreshError) {
        // 刷新 token 失败，可能需要重新登录
        return Promise.reject(refreshError);
      }
    }
    
    // 如果响应不是因为 token 过期，则直接返回错误
    return Promise.reject(error);
  }
);

// 使用 axiosInstance 发送请求
const fetchData = async () => {
  try {
    const response = await axiosInstance.get('/some-endpoint');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data', error);
  }
};

fetchData();

在 React Query 中，你可能会在全局的 queryFn 中使用此 Axios 实例来发起请求。如果你的应用中使用了 React Query 的 useMutation 或 useQuery 钩子，确保这些请求都是通过上面设置了拦截器的 Axios 实例进行的，这样当 token 过期时，拦截器就会自动处理刷新 token 的逻辑。

此外，React Query 提供了 QueryClient 的 setDefaultOptions 方法，可以用来设置所有查询和突变的默认行为，比如在出现特定错误时重试。但是，token 刷新逻辑更适合在 Axios 层面处理，因为它与 HTTP 请求的发送和接收直接相关。