401 未经授权的反应 axios

Question

我正在尝试使用 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;

这是我的登录信息 function

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 坚持坚持我购物车的 state

如果有人能帮助我，我非常感谢这就是发生的事情

Answer 1

您在执行 js 时直接初始化您的令牌。 所以当你检索它时，它是未定义的。 Ans 当你登录时，你确实存储了你的令牌，但你没有在你的应用程序中更新它。

我可以看到您正在使用 redux，因此请将您的令牌存储在您的 redux 商店中，并在发送您的 api 调用以检索您的购物车之前，从 redux 检索您的令牌，以始终拥有您的令牌的最新值