RTK Query中prepareHeaders的getState无法获取auth.accessToken值求助

核心原因 #

你遇到的是时序问题：

• prepareHeaders在请求发起瞬间执行，而登录接口的onQueryStarted是在请求成功返回后才通过dispatch(setAccessToken)更新store中的token。
• 首次调用loginSubmit时，登录请求发起时store里的accessToken还是初始的null，所以getState()拿到的是null；登录成功后token才被存入store，但此时当前请求已完成，prepareHeaders不会再执行。
• 第二次调用loginSubmit时，store里已存在上次登录存入的token，因此prepareHeaders能正常获取到值。

解决方案 #

1. 登录/注册接口跳过token设置

登录、注册接口本身不需要携带Authorization头，可在prepareHeaders中判断请求类型，跳过token添加逻辑：

const baseQuery = fetchBaseQuery({ 
  baseUrl: "http://127.0.0.1:8000",
  credentials: "include",
  prepareHeaders: (headers, { getState, endpoint }) => {
      // 登录、注册接口直接返回headers，不处理token
      if (endpoint === 'login' || endpoint === 'userRegister') {
        return headers;
      }
      
      const accessToken = getState().auth.accessToken;
      if (accessToken) {
        headers.set('Authorization', `Bearer ${accessToken}`);
      }
      return headers;
   }
});

2. 确保后续请求自动使用新token

RTK Query的prepareHeaders会在每次请求前重新执行，只要store中的token更新，后续所有请求都会自动带上最新的token。如果有缓存数据需要刷新，你已经在login mutation中设置了invalidatesTags: ["Users"]，这会自动触发对应标签的缓存失效并重新获取数据。

3. 手动触发数据刷新（可选）

如果需要登录后立即刷新特定数据，可调用对应Query的refetch方法：

// 假设你有获取用户信息的useGetUserInfoQuery
const { refetch: refetchUserInfo } = useGetUserInfoQuery();

const loginSubmit = async (value) => {
  const {accessToken} = await loginUser(value).unwrap();
  refetchUserInfo();
  navigate("/");
};

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