RTK中如何自动更新Reducer以获取登录后的Cookie Token？

你的核心问题是token和role在文件初始化时只读取了一次，后续Cookie变化（登录/登出）不会重新读取，导致请求头一直用旧值。以下是具体解决方案：

1. 动态读取Cookie，每次请求都获取最新值 #

把Cookie读取逻辑移到prepareHeaders函数内部，这样每次发送API请求时都会重新读取Cookie的最新状态，同时避免发送undefined的token：

修改后的baseQuery部分代码：

baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:5000/',
    prepareHeaders: (headers) => {
        // 每次请求都重新读取最新的Cookie值
        const token = cookie.load('token')
        const role = cookie.load('role')

        // 只有token/role存在时才添加到请求头，避免发送undefined
        if (token) {
            headers.append('token', token)
        }
        if (role) {
            headers.append('role', role)
        }

        // 注意：Access-Control-Allow-Origin是后端设置的响应头，前端请求里加这个无效，直接删掉
        return headers
    }
}),

2. 移除全局的token/role变量 #

删掉文件开头的这两行冗余代码，因为现在每次请求都会动态读取最新值：

const token = cookie.load('token')
const role = cookie.load('role')

3. 确保登录/登出后相关查询自动刷新 #

你已经在loginUser mutation里设置了invalidatesTags: ['User']，这会让useUserQuery自动重新获取数据。如果还有其他需要认证的查询（比如cart、orders），可以扩展invalidatesTags的范围，让这些查询也自动刷新：

loginUser: builder.mutation({
    query: (user)=>({
        url: 'signin',
        method: 'POST',
        body: user
    }),
    // 登录成功后，让User、Cart、Orders的查询都自动刷新
    invalidatesTags: ['User', 'Cart', 'Orders']
}),

这样登录后，购物车、订单这些需要用户认证的查询会自动重新发起，拿到最新的数据，不用手动刷新页面。

为什么原来的写法不行？ #

你原来在文件顶部定义的token和role，只会在应用首次加载或页面刷新时执行一次，之后即使Cookie变化（比如登录成功写入token），这两个变量的值也不会更新，导致请求头一直用旧值。把读取逻辑移到prepareHeaders里，就能保证每次请求都用最新的Cookie。

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