React+Redux Toolkit+Axios登录后获取购物车报401问题求助

1. 静态token变量的滞后性：你在常量文件中定义的token是模块初始化时从localStorage读取的静态值，登录成功后更新localStorage不会自动同步这个变量，因此首次登录调用getCart时，使用的仍是初始的null值，触发401错误。
2. Redux Persist异步恢复的时机问题：刷新页面时，Redux Persist是异步恢复状态的，购物车页面的useEffect会在状态恢复完成前执行getCart，此时token仍未就绪；第二次刷新时状态已完全恢复，因此能正常获取token。

1. 从Redux状态实时获取Token（推荐） #

放弃静态常量的token，改为在getCart中通过Redux的thunkAPI获取当前最新的auth状态，确保每次请求都使用最新token：

export const getCart = createAsyncThunk("cart/getcart", async (_, thunkAPI) => {
  // 从Redux状态中取出当前用户的token
  const { auth } = thunkAPI.getState();
  const token = auth.user?.token;

  if (!token) {
    throw new Error("用户未登录，无法获取购物车");
  }

  const response = await axios.get("http://127.0.0.1:8000/techcart/get_cart/", {
    headers: {
      Authorization: `Token ${token}`,
    },
  });

  return response.data;
});

2. 调整登录后getCart的调用时机 #

不要依赖isLoggedIn状态触发，改为在登录请求成功后直接调用，确保token已写入localStorage或Redux状态：

const HandleLogin = async () => {
  try {
    // 等待登录请求完成并获取返回值
    await dispatch(login({ email, password })).unwrap();
    navigate('/');
    // 登录成功后立即调用getCart
    dispatch(getCart());
  } catch (error) {
    // 处理登录失败逻辑
    console.error("登录失败:", error);
  }
};

3. 修复刷新时的购物车请求时机 #

结合Redux Persist的异步特性，购物车页面需等待auth状态完全就绪后再调用getCart：

import { useSelector } from 'react-redux';

// ...

const { isLoggedIn, user } = useSelector(state => state.auth);

useEffect(() => {
  // 仅当用户已登录且token存在时，才发起购物车请求
  if (isLoggedIn && user?.token) {
    dispatch(getCart());
  }
}, [isLoggedIn, user, dispatch]);

4. 全局Axios拦截器优化（可选） #

配置全局Axios拦截器，自动为所有请求添加token，避免重复编写header逻辑：

// 创建Axios实例
const api = axios.create({
  baseURL: "http://127.0.0.1:8000/techcart/"
});

// 请求拦截器：自动添加token
api.interceptors.request.use(config => {
  const { auth } = store.getState(); // 导入你的Redux store
  const token = auth.user?.token;
  if (token) {
    config.headers.Authorization = `Token ${token}`;
  }
  return config;
});

export default api;

之后所有请求都使用这个实例即可，无需手动设置headers：

// getCart示例
const response = await api.get("/get_cart/");

// login示例
const response = await api.post("/login/", { username: email, password });

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