代码拆分场景下如何为RTK Query配置prepareHeaders添加统一请求头

下面两种方案都不需要修改自动生成的API slice文件：

方案1：运行时扩展生成的API实例 #

你可以封装生成API内置的baseQuery，添加认证头逻辑后全局应用到所有端点：

// 项目自定义的扩展文件，不要修改自动生成的代码
import { generatedApi } from './generated/api';

// 封装原有baseQuery，添加认证头逻辑
const baseQueryWithAuth = async (args, api, extraOptions) => {
  const originalBaseQuery = generatedApi.baseQuery;
  // 支持从redux store中获取token，也可以从localStorage等其他位置获取
  const token = api.getState().auth.token;

  // 给请求添加头信息
  if (typeof args !== 'string') {
    args.headers = {
      ...args.headers,
      Authorization: token ? `Bearer ${token}` : undefined,
    };
  }

  // 调用原有baseQuery执行请求
  return originalBaseQuery(args, api, extraOptions);
};

// 全局扩展所有端点，替换baseQuery
export const extendedApi = generatedApi.enhanceEndpoints({
  endpoints: (endpoint) => {
    endpoint.baseQuery = baseQueryWithAuth;
    return endpoint;
  },
});

注意事项：

• 项目中所有使用API的地方都要改用导出的extendedApi，不要直接用原来的generatedApi
• 注入store时也要用extendedApi的reducer和middleware，避免逻辑不生效

方案2：修改代码生成配置（生成阶段内置逻辑） #

如果你使用的是官方的OpenAPI代码生成工具，可以直接在生成配置中指定prepareHeaders逻辑，生成时会自动把该配置内置到API slice中，不需要后续修改生成文件：

// openapi-codegen.config.js 代码生成配置文件
module.exports = {
  schema: '你的OpenAPI规范地址/本地路径',
  outputFile: './src/generated/api.ts',
  exportName: 'generatedApi',
  baseQuery: {
    name: 'fetchBaseQuery',
    importFrom: '@reduxjs/toolkit/query/react',
    options: {
      baseUrl: '你的API基础地址',
      prepareHeaders: (headers, { getState }) => {
        const token = getState().auth.token;
        if (token) {
          headers.set('Authorization', `Bearer ${token}`);
        }
        return headers;
      },
    },
  },
};

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