RTK Query登录切换后仍使用旧token的问题求助

问题分析 #

你当前的核心问题是：createApi初始化时，useAuthToken()只会执行一次并读取当时的token，后续登录/登出导致localStorage里的token更新后，baseQuery的请求头不会自动同步最新token，导致请求一直使用旧token返回旧数据，只有刷新页面重新初始化API配置才会读取新token。

解决方案 #

1. 动态设置请求头，每次请求读取最新token

不要在baseQuery初始化时直接传入固定的headers，改用prepareHeaders方法，让每次请求都动态获取当前localStorage里的token：

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

export const usersApi = createApi({
  reducerPath: "users",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://127.0.0.1:8080",
    // 每次请求前动态生成请求头
    prepareHeaders: (headers) => {
      const token = localStorage.getItem("token");
      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getUserLogged: builder.query({
      query: () => "/check/token",
      // 添加标签，用于后续失效缓存
      providesTags: ["User"],
    }),
  }),
});

export const { useGetUserLoggedQuery } = usersApi;

2. 登出时主动清除旧缓存并触发重新查询

在登出操作中，除了删除localStorage的token，还要通过RTK Query的工具方法让用户数据的缓存失效，强制触发新的请求：

// 假设你的dispatch是从redux hooks中获取的
import { useDispatch } from "react-redux";
import { usersApi } from "./path-to-your-usersApi-file";

const handleLogout = () => {
  // 1. 删除本地存储的token
  localStorage.removeItem("token");
  // 2. 让User标签对应的缓存失效，触发组件重新请求最新数据
  const dispatch = useDispatch();
  dispatch(usersApi.util.invalidateTags(["User"]));
};

3. 简化页面数据获取逻辑（可选）

你页面中用useState转存data的操作是多余的，直接使用RTK Query返回的data即可：

const { data: dataResults, error, isLoading } = useGetUserLoggedQuery();

// 直接使用dataResults渲染即可，无需额外的useEffect和useState

效果说明 #

修改后，每次请求都会自动读取最新的token，登出时主动清空旧缓存并触发新请求，无需刷新页面就能实时显示当前登录用户的正确数据。

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