如何在Redux Toolkit的injectEndpoint中获取Store内的Token？

有两种常用方式可以在RTK Query的injectEndpoint中获取Redux Store的状态值，推荐第二种全局配置方式，避免重复编写认证逻辑：

方式一：在单个Endpoint的Query函数中直接获取 #

RTK Query的query函数支持接收第二个参数（API上下文对象），其中包含getState方法，可直接获取整个Store的状态。修改你的getOrgInventory端点代码如下：

export const organizationApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getOrgInventory: builder.query({
      // 新增第二个参数{ getState }
      query: (id, { getState }) => {
        // 从Store中取出token，根据你的state结构调整路径
        const token = getState().userDetails.token;
        return {
          url: `${ORGANIZATION_URL}/${id}/inventory`,
          headers: {
            "Content-Type": "application/json",
            Authorization: token ? `Bearer ${token}` : "",
          },
        };
      },
      keepUnusedDataFor: 4,
    }),
  }),
});

方式二：在BaseQuery中全局配置认证头（推荐） #

如果多个API请求都需要携带认证头，更高效的方式是在baseQuery中统一处理，所有端点会自动继承该配置：

1. 修改baseQuery定义 #

假设你使用RTK Query自带的fetchBaseQuery，修改如下：

import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseQuery = fetchBaseQuery({
  baseUrl: "你的API基础地址", // 替换为实际基础URL
  // 预处理请求头
  prepareHeaders: (headers, { getState }) => {
    const token = getState().userDetails.token;
    // 存在token则设置认证头
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    // 全局设置Content-Type
    headers.set('Content-Type', 'application/json');
    return headers;
  },
});

export const apiSlice = createApi({
  baseQuery,
  tagTypes: ["User", "Organization", "Inventory", 'Item'],
  endpoints: (builder) => ({}),
});

2. 简化Endpoint代码 #

此时端点代码无需重复配置请求头，简化为：

export const organizationApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getOrgInventory: builder.query({
      query: (id) => ({
        url: `${ORGANIZATION_URL}/${id}/inventory`,
      }),
      keepUnusedDataFor: 4,
    }),
  }),
});

内容的提问来源于stack exchange，提问作者Khant Min Si Thu