Redux Toolkit中Authorization Bearer Token Undefined错误求助

问题现象 #

• 浏览器抛出 Error: authorization bearer undefined 错误，请求头中Authorization字段为Bearer undefined
• 在OrderScreen.js的useEffect中尝试判断用户状态：若用户不存在则跳转至/login页面，但始终无法正确获取用户值
• 已提供OrderScreen.js的useEffect、orderSlice的getOrder、orderService.js的getOrder相关代码，且参考过Stack Overflow相关问题仍未解决

排查方向 #

1. 授权令牌的存储与读取 #

• 确认用户登录后，令牌是否正确存入localStorage/sessionStorage或Redux状态
• 检查orderService.js的getOrder方法中读取令牌的逻辑，避免出现未获取到令牌就拼接请求头的情况：

  // 错误示例：直接拼接未校验的令牌
  const token = localStorage.getItem('token');
  const config = { headers: { Authorization: `Bearer ${token}` } };
  
  // 修正示例：先校验令牌有效性
  const token = localStorage.getItem('token');
  if (!token) throw new Error('未获取到登录令牌');
  const config = { headers: { Authorization: `Bearer ${token}` } };
  

• 若令牌存储在Redux，需确认orderService是否能正确从Redux状态中读取令牌，而非仅依赖本地存储

2. 用户状态的同步与监听 #

• 检查OrderScreen.js的useEffect依赖项是否包含用户状态，确保用户状态变化时能触发重新判断：

  useEffect(() => {
    if (!user) {
      navigate('/login');
      return;
    }
    // 后续订单请求逻辑
  }, [user, navigate]); // 必须添加user作为依赖项
  

• 确认Redux中用户状态的初始值，建议设为null而非undefined，避免判断逻辑混淆“未初始化”与“未登录”状态

3. 异步请求的执行时机 #

• 排查getOrder是否在用户状态未就绪时就发起请求，比如组件挂载时用户信息还未从本地存储加载到Redux
• 优化useEffect逻辑，确保只有用户状态有效时才调用订单接口：

  useEffect(() => {
    const fetchOrder = async () => {
      // 双重校验用户及令牌有效性
      if (!user || !user.token) {
        navigate('/login');
        return;
      }
      try {
        await dispatch(getOrder(orderId)).unwrap();
      } catch (err) {
        console.error('获取订单失败:', err);
      }
    };
    fetchOrder();
  }, [user, dispatch, navigate, orderId]);
  

4. Redux Slice的异步逻辑 #

• 检查orderSlice中getOrder的Thunk函数，确认是否正确将令牌传递给orderService.getOrder
• 在Thunk中添加前置校验，若令牌不存在直接抛出错误或触发跳转，避免无效请求

验证步骤 #

1. 打开浏览器控制台，执行localStorage.getItem('token')，确认是否返回有效令牌字符串
2. 在orderService.js的getOrder方法中添加console.log(token)，查看实际传递的令牌值
3. 在OrderScreen.js的useEffect中打印user状态，确认组件挂载时用户信息是否已加载完成

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