如何在RTK Query中从响应头获取Authorization字段内容

前置必要配置：跨域场景下必须让后端在响应头中添加 Access-Control-Expose-Headers: Authorization，否则浏览器安全策略会禁止前端JS读取该头字段，无论前端逻辑怎么写都只能拿到null。

方案1：单接口读取（无需修改baseQuery，最简便） #

不需要自定义重写baseQuery，直接在对应登录接口的transformResponse配置中读取响应头即可。fetchBaseQuery执行完成后会将完整响应对象挂载到meta参数上，直接调用headers的get方法就能拿到目标字段。

修改后的完整代码如下：

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { ILoginUser } from "./types";

const api = process.env.REACT_APP_BASEURL_DEV;

export const authApi = createApi({
  reducerPath: "authApi",
  baseQuery: fetchBaseQuery({
    baseUrl: `${api}`,
  }),
  endpoints: (builder) => ({
    signIn: builder.mutation({
      query: (body: ILoginUser) => ({
        url: "/login",
        method: "post",
        body,
      }),
      // 新增响应转换逻辑
      transformResponse: (responseData, meta) => {
        const authToken = meta?.response?.headers.get("Authorization");
        return {
          data: responseData,
          token: authToken,
        };
      },
    }),
  }),
});

export const { useSignInMutation } = authApi;

接口调用时，从mutation返回的data字段中就能直接解构出token，自行存储到本地或全局状态即可。

方案2：全局统一处理（多接口需要读响应头时使用） #

如果项目中多个接口都需要从响应头取字段，可以包装一层自定义baseQuery做统一处理，不需要每个接口单独写逻辑：

import { createApi, fetchBaseQuery, BaseQueryFn, FetchArgs, FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
import { ILoginUser } from "./types";

const api = process.env.REACT_APP_BASEURL_DEV;
// 原始baseQuery
const rawBaseQuery = fetchBaseQuery({ baseUrl: `${api}` });

// 包装一层带响应头处理逻辑的baseQuery
const baseQueryWithHeaderHandle: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (args, api, extraOptions) => {
  const requestResult = await rawBaseQuery(args, api, extraOptions);
  // 统一读取Authorization头
  const token = requestResult.meta?.response?.headers.get("Authorization");
  if (token) {
    // 可直接在此处做全局token存储，比如dispatch到对应slice
    // api.dispatch(authSlice.actions.setToken(token))
  }
  return requestResult;
};

export const authApi = createApi({
  reducerPath: "authApi",
  baseQuery: baseQueryWithHeaderHandle,
  endpoints: (builder) => ({
    signIn: builder.mutation({
      query: (body: ILoginUser) => ({
        url: "/login",
        method: "post",
        body,
      }),
    }),
  }),
});

export const { useSignInMutation } = authApi;

常见踩坑说明 #

• 不要在query配置函数里尝试读取响应，该函数仅负责拼接请求参数，执行时请求还未发送，拿不到响应内容
• 响应头的get方法是大小写不敏感的，传入authorization、Authorization效果完全一致，不需要纠结字段大小写
• 如果本地调试时headers.get("Authorization")返回null，优先检查后端CORS配置是否正确暴露了该头，不要先反复修改前端逻辑

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