axiosでアクセストークン自動リフレッシュの無限ループを防ぐ

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response?.status === 401) {
      const { data } = await apiClient.post('/api/auth/refresh', {
        refreshToken: getRefreshToken(),
      });
      setAccessToken(data.accessToken);
      originalRequest.headers['Authorization'] = 'Bearer ' + data.accessToken;
      return apiClient(originalRequest);
    }

    return Promise.reject(error);
  }
);

const refreshClient = axios.create({
  baseURL: '/api',
});

この refreshClient には共通インターセプターを付けていません。以降のリフレッシュ処理では、apiClient.post ではなく refreshClient.post を使います。baseURL に /api を指定しているので、パスから /api を除いた /auth/refresh を指定する形ですね。

// 変更前
const { data } = await apiClient.post('/api/auth/refresh', {
  refreshToken: getRefreshToken(),
});

// 変更後
const { data } = await refreshClient.post('/auth/refresh', {
  refreshToken: getRefreshToken(),
});

type QueueItem = {
  resolve: (token: string) => void;
  reject: (error: unknown) => void;
};

type ProcessQueueArg =
  | { error: unknown; token?: never }
  | { error?: never; token: string };

let isRefreshing = false;
let failedQueue: QueueItem[] = [];

const processQueue = (arg: ProcessQueueArg) => {
  failedQueue.forEach((prom) => {
    if (arg.error) {
      prom.reject(arg.error);
    } else {
      prom.resolve(arg.token);
    }
  });
  failedQueue = [];
};

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      if (isRefreshing) {
        return new Promise((resolve: (token: string) => void, reject: (error: unknown) => void) => {
          failedQueue.push({ resolve, reject });
        })
          .then((token) => {
            originalRequest.headers['Authorization'] = 'Bearer ' + token;
            return apiClient(originalRequest);
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      }

      isRefreshing = true;

      try {
        const { data } = await refreshClient.post('/auth/refresh', {
          refreshToken: getRefreshToken(),
        });
        const newAccessToken = data.accessToken;
        setAccessToken(newAccessToken);
        apiClient.defaults.headers.common['Authorization'] = 'Bearer ' + newAccessToken;
        processQueue({ token: newAccessToken });
        originalRequest.headers['Authorization'] = 'Bearer ' + newAccessToken;
        return apiClient(originalRequest);
      } catch (refreshError) {
        processQueue({ error: refreshError });
        clearTokens();
        window.location.href = '/login';
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
      }
    }

    return Promise.reject(error);
  }
);