如何在RTK Query中设置Authorization Token？遇401错误求助

以下是排查和解决该问题的具体步骤：

1. 先确认Token是否正确获取 #

首先要排查你从Redux State中拿到的token是否有效、路径是否正确：

• 在prepareHeaders里添加调试日志，查看实际获取到的token值：

  prepareHeaders: (headers, { getState }) => {
      const authState = getState().auth;
      console.log('当前Auth状态:', authState); // 检查state结构是否符合预期
      const token = authState?.user?.token; // 用可选链避免因路径错误报错
      console.log('准备发送的Token:', token);
  
      if (token) {
        headers.set('Authorization', `Bearer ${token}`);
      }
  
      return headers;
    },
  

• 确认Redux State的路径是否正确，比如是不是getState().auth.token而非auth.user.token，根据你的实际state结构调整。

2. 检查请求头格式是否匹配后端要求 #

• 部分后端要求请求头字段为Authorization（首字母大写），虽然Fetch的Headers不区分大小写，但统一成首字母大写更稳妥；
• 确认后端对Token前缀的要求：有些后端不需要Bearer前缀，或者要求用Token等其他前缀，需和后端文档保持一致。

3. 验证Token本身的有效性 #

• 把拿到的Token复制到jwt.io（本地解析，无需发送到服务器），检查Token是否过期、Payload信息是否正确；
• 用Postman直接携带该Token请求同一个接口，如果Postman也返回401，说明是Token本身无效，和RTK Query的设置无关。

4. 查看实际请求的发送情况 #

打开浏览器开发者工具的「网络」面板，找到对应的请求：

• 检查请求URL是否正确，是否和baseUrl+query路径一致；
• 查看请求头中是否存在Authorization字段，以及字段值是否是你预期的Bearer xxx格式。

5. 处理异步Token的情况 #

如果Token是登录后才存入Redux State的，要确保调用useCustomersQuery时Token已经存在：

• 可以通过条件渲染实现，比如只有当Token存在时，才渲染使用该Hook的组件：

  const { token } = useSelector(state => state.auth.user);
  
  if (!token) {
    return <div>请先登录</div>;
  }
  
  const { data, error } = useCustomersQuery();
  // ...后续渲染逻辑
  

修改后的示例代码 #

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

export const customersApi = createApi({
    reducerPath: "customersApi",
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000' }),
    prepareHeaders: (headers, { getState }) => {
        const authState = getState().auth;
        const token = authState?.user?.token;
        
        if (token) {
          headers.set('Authorization', `Bearer ${token}`);
        }
        
        return headers;
      },
    endpoints: (builder) => ({
        customers: builder.query({
            query: () => '/api/v1/customer/paginate-customer',
        })
    })
})

export const { useCustomersQuery } = customersApi

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