Redux Toolkit中如何获取Token并在API请求中携带？迁移后的疑问

直接从localStorage取Token的问题 #

• 你当前的实现是在模块加载时就从localStorage读取user，这个值是静态的——后续用户登录/登出导致localStorage变化时，这个变量不会自动更新，会出现拿不到最新Token甚至Token为undefined的情况。
• localStorage的数据和Redux状态可能不同步，比如用户登出时Redux状态已经清空，但localStorage还没来得及删除，此时拿到的Token已经无效。

正确做法：用thunkApi.getState()获取Redux状态中的Token #

Redux Toolkit的createAsyncThunk依然支持通过thunkApi.getState()获取最新的Redux状态，这才是符合Redux单一数据源原则的可靠方式，和你之前用旧版Redux的思路一致。

修改后的代码示例 #

VideoSlice

// 先导入RootState类型，确保能正确获取状态
import { RootState } from '../store'; // 假设你的store导出了RootState类型

export const uploadVideo = createAsyncThunk("videos/uploadStatus", async (input: VideoInput, thunkApi) => {
    try {
        // 从Redux状态中获取实时的用户信息
        const state = thunkApi.getState() as RootState;
        const user = state.auth.user; // 假设你的auth slice中保存了用户状态

        if (!user?.token) {
            throw new Error("用户未登录，请先登录");
        }

        return await videoService.uploadVideo(input, user.token);

    } catch (error: any) {
        const message = (error.response && error.response.data && error.response.data.message) ||
        error.message ||
        error.toString();
        return thunkApi.rejectWithValue(message);
    }
});

补充说明

• 确保你的Redux store中有一个authSlice（或类似模块）专门管理用户登录状态，将user信息（包括token）存在Redux中，而不是只依赖localStorage。
• 如果需要持久化用户状态，可以用redux-persist将Redux状态同步到localStorage，这样既保证单一数据源，又能实现状态持久化。

退而求其次：在thunk内部实时读取localStorage #

如果暂时不想依赖Redux状态，也应该在thunk的每次调用中实时读取localStorage，而不是在模块顶部静态取值：

export const uploadVideo = createAsyncThunk("videos/uploadStatus", async (input: VideoInput, thunkApi) => {
    try {
        // 每次调用thunk时再读取localStorage
        const userStr = localStorage.getItem('user');
        const user = userStr ? JSON.parse(userStr) : null;

        if (!user?.token) {
            throw new Error("用户未登录，请先登录");
        }

        return await videoService.uploadVideo(input, user.token);

    } catch (error: any) {
        const message = (error.response && error.response.data && error.response.data.message) ||
        error.message ||
        error.toString();
        return thunkApi.rejectWithValue(message);
    }
});

但这种方式依然存在Redux状态和localStorage不同步的风险，优先推荐从Redux状态获取。

内容的提问来源于stack exchange，提问作者Elio David Saavedra Sanchez