如何在RTK Query的指定接口禁用prepareHeaders全局配置

你可以通过以下两种常用方式实现指定接口跳过全局授权头注入：

方案1：基于端点名称白名单过滤 #

直接在prepareHeaders中通过内置的endpoint参数判断当前请求所属的端点，公开接口直接跳过授权头设置，代码修改如下：

export const backendService = createApi({
  reducerPath: 'backend',
  baseQuery: fetchBaseQuery({
    baseUrl: `${Endpoint}`,
    prepareHeaders: (headers, {getState, endpoint}) => {
      const token = getState().auth.token;
      // 定义不需要加授权头的公开端点列表
      const publicEndpoints = ['registerUser', 'login'];
      // 仅非公开端点且存在token时才加授权头
      if (token && !publicEndpoints.includes(endpoint)) {
        headers.set('authorization', `Bearer ${token}`);
      }
      // 注意：Access-Control-Allow-Origin是响应头，需后端配置，前端加在请求头无效还可能导致跨域问题，建议删除
      // headers.set('Access-Control-Allow-Origin', '*');
      return headers;
    },
  }),
  // 其余配置保持不变
  tagTypes: ['Question', 'Questions'],
  endpoints: build => ({
    // 端点配置不需要修改
    registerUser: build.mutation({
      query: body => ({
        url: 'auth/local/register',
        method: 'POST',
        body,
      }),
    }),
    login: build.mutation({
      query: body => ({
        url: 'auth/local',
        method: 'POST',
        body,
      }),
    }),
    getCategories: build.query({
      query: () => {
        return {
          url: 'categories'
        };
      },
    }),
  }),
});

该方案适合公开接口数量少的场景，改动最小。

方案2：基于自定义标识过滤 #

如果不想硬编码端点名称，可给需要跳过授权的端点添加自定义标识，后续新增公开接口只需加标识即可，无需修改prepareHeaders逻辑：

1. 先给公开端点添加extraOptions标识：

endpoints: build => ({
  registerUser: build.mutation({
    query: body => ({
      url: 'auth/local/register',
      method: 'POST',
      body,
    }),
    // 添加跳过授权的标识
    extraOptions: { skipAuth: true }
  }),
  login: build.mutation({
    query: body => ({
      url: 'auth/local',
      method: 'POST',
      body,
    }),
    // 添加跳过授权的标识
    extraOptions: { skipAuth: true }
  }),
  getCategories: build.query({
    query: () => {
      return {
        url: 'categories'
      };
    },
  }),
})

2. 再修改prepareHeaders逻辑，读取标识判断是否跳过授权头：

prepareHeaders: (headers, {getState, extra}) => {
  const token = getState().auth.token;
  if (token && !extra?.skipAuth) {
    headers.set('authorization', `Bearer ${token}`);
  }
  return headers;
}

该方案扩展性更强，适合公开接口后续会不断新增的场景。

内容的提问来源于stack exchange，提问作者Nur Ilham Iskandar