Redux Toolkit Query中prepareHeaders的extra属性赋值疑问

要给prepareHeaders传递特定于端点的额外参数（比如你的scope），最优方案是利用RTK Query端点的meta字段，而非通过自定义请求头传递。以下是具体实现步骤：

1. 在端点定义中添加meta字段 #

修改你的injectGetItems函数，在build.query里为当前端点设置meta，将scope存入其中：

export const injectGetItems = <T extends HeimdallMember>(name: string, tag: string, route: string, primary_key: string = "id", scope: string = "get:management_project") => {
  const enhancedApi = api.enhanceEndpoints({ addTagTypes: [tag] });

  const entityApi = enhancedApi.injectEndpoints({
    endpoints: (build) => ({
      [name]: build.query({
        query: (arg) => {
          return arg 
            ? { url: route, params: { ...arg } }
            : { url: route };
        },
        // 存入当前端点的scope到meta字段
        meta: { scope },
        providesTags: (result) =>
          result 
            ? [...result.Data.map(({ [primary_key]: iri }) => ({ type: tag, id: iri } as const)), { type: tag, id: "LIST" }]
            : [{ type: tag, id: "LIST" }]
      })
    })
  });

  return entityApi;
};

2. 在prepareHeaders中读取meta里的参数 #

修改createApi中的prepareHeaders函数，通过上下文参数的endpoint.meta获取预先设置的scope，不再依赖自定义请求头：

export const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:3001/api/v2/",
    prepareHeaders: async (headers, { endpoint }) => {
      // 从端点元数据中取出scope
      const scope = endpoint.meta?.scope;

      try {
        if (scope) {
          const access_token = await sec.getTokenSilently()({
            authorizationParams: {
              audience: `audience`,
              scope: scope
            }
          });
          if (access_token) {
            headers.set("Authorization", `Bearer ${access_token}`);
          }
        }
        return headers;
      } catch (e) {
        console.log(e);
        return headers;
      }
    }
  }),
  endpoints: () => ({})
});

方案优势 #

• 避免自定义请求头的冗余传递，逻辑更直观
• meta是RTK Query专为存储端点元数据设计的字段，完全符合框架规范
• 无需在请求头中临时存储业务参数，减少不必要的请求头开销

额外补充：如果需要在单个请求调用时传递临时参数，可以在调用useQuery时通过第二个参数传入extra：

useGetItemsQuery(arg, { extra: { customScope: "临时权限" } });

此时prepareHeaders的上下文参数中就能直接拿到该值：

prepareHeaders: async (headers, { extra }) => {
  const customScope = extra?.customScope;
  // 后续逻辑处理
}

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