我尝试使用react、redux工具包和axios创建一个电子商务，问题是我希望用户登录并在登录后立即从后端获取购物车，但当我首次登录时，它总是失败并显示（未授权），因为它找不到令牌
然后在刷新后，它再次显示未授权，在第三次刷新后，它工作
这是我的购物车

export const getCart = createAsyncThunk("cart/getcart", async () => {
  const response = await axios.get("http://127.0.0.1:8000/techcart/get_cart/", {
    headers: {
      Authorization: `Token ${token}`,
    },
  });

  return response.data;
});
const cartSlice = createSlice({
  name: "cart",
  initialState: {
    cart: [],
    cartItemsIds :[],
  },

builder.addCase(getCart.fulfilled, (state, action) => {
      state.cart = action.payload;

这是我的登录功能

export const login = createAsyncThunk(
  "auth/login",
  async ({ email, password }, thunkAPI) => {
    try {
      const response = await axios.post(
        "http://127.0.0.1:8000/techcart/login/",

        { username: email, password }
      );
        localStorage.setItem("user", JSON.stringify(response.data));
      
      return response.data;
      
    } catch (error) {}
  }
);
const initialState = user
  ? { isLoggedIn: true, user }
  : { isLoggedIn: false, user: null };

  builder.addCase(login.fulfilled, (state, action) => {
      state.isLoggedIn = true;
      state.user = action.payload;

这里是我做这登录的地方

const HandleLogin = () => {
    dispatch(login({ email, password }));

  };

  useEffect(()=> {
    if(isLoggedIn){
      navigate('/')
      dispatch(getCart())
    }
  },[isLoggedIn])

购物车页面

useEffect(() => {

    dispatch(getCart());
    
  }, []);

这里是我定义我的令牌的地方：

export let user = JSON.parse(localStorage.getItem("user")) ? JSON.parse(localStorage.getItem("user")) :  null;
export let userId = user ?  user.user_id : null;
export let token = user!=null ? user.token : null;

这里是我在我的购物车切片导入它

import { user, token } from "../../constants";

我正在使用redux persist来保持购物车的状态
如果有人能帮我我很感激