如何在RTK Query中实现响应拦截器处理未授权跳转与令牌清除

RTK Query 提供了两种核心方式来实现类似Angular HTTP拦截器的未授权响应处理，无需在每个请求中重复编写逻辑：

一、全局拦截：自定义BaseQuery包装器 #

这是最接近Angular全局拦截器的方案，通过包装默认的fetchBaseQuery，在底层统一处理所有请求的错误响应：

import { fetchBaseQuery, createApi } from '@reduxjs/toolkit/query/react';
// 替换为你的实际工具函数：清除令牌、跳转登录页
import { clearAuthToken, navigateToLogin } from './auth/utils';

// 基础查询配置
const rawBaseQuery = fetchBaseQuery({ baseUrl: '/api' });

// 带授权拦截的包装器
const baseQueryWithAuthCheck = async (args, api, extraOptions) => {
  const result = await rawBaseQuery(args, api, extraOptions);

  // 拦截401未授权错误
  if (result.error && result.error.status === 401) {
    clearAuthToken();
    navigateToLogin();
  }

  return result;
};

// 创建全局API切片，所有请求自动应用拦截逻辑
export const globalApi = createApi({
  baseQuery: baseQueryWithAuthCheck,
  endpoints: (builder) => ({
    // 定义你的查询/突变
    getPosts: builder.query({ query: () => '/posts' }),
    createPost: builder.mutation({ query: (data) => ({ url: '/posts', method: 'POST', body: data }) })
  }),
});

二、组级拦截：针对特定API组应用拦截 #

如果只想为某一组相关请求处理未授权，可以为该组单独创建API切片，使用带拦截逻辑的baseQuery：

// 用户相关API切片，仅该组请求应用授权拦截
export const userApi = createApi({
  baseQuery: baseQueryWithAuthCheck, // 复用上面的拦截包装器
  endpoints: (builder) => ({
    getUserProfile: builder.query({ query: () => '/user/profile' }),
    updateUserInfo: builder.mutation({ query: (data) => ({ url: '/user', method: 'PUT', body: data }) })
  }),
});

如果仅需为单个端点处理，也可以使用transformErrorResponse字段（适合零散需求）：

getUserProfile: builder.query({
  query: () => '/user/profile',
  transformErrorResponse: (error) => {
    if (error.status === 401) {
      clearAuthToken();
      navigateToLogin();
    }
    return error;
  },
}),

为什么不推荐用transformResponse？ #

transformResponse仅处理成功响应（HTTP状态码2xx），而未授权属于错误响应（4xx/5xx），因此不会触发该回调，用它处理未授权逻辑完全不适用。

内容的提问来源于stack exchange，提问作者Mahesh Bansod