React中localStorage初始值获取失败：JWT认证首次渲染token为null

核心问题分析 #

你的问题根源在于AuthContext中state.user的结构不一致：

• 登录时通过dispatch将state.user设置为仅包含用户信息的对象（丢失了token）
• 刷新页面时，从localStorage读取的是完整的登录响应（包含token和用户信息），导致两种场景下user的结构完全不同，最终首次登录后user.token为undefined。

具体来说，你的authReducer的LOGIN case只将action.payload.user赋值给state.user，但登录响应的result（存在localStorage的内容）是包含token和user字段的完整对象，这就导致登录后state.user没有token属性，而刷新后state.user是完整对象（带token）。

修复步骤 #

1. 统一AuthContext的state结构

修改authReducer，让LOGIN case直接使用完整的登录响应payload，确保state.user始终包含token和用户信息：

export const authReducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      return { user: action.payload }; // 直接赋值完整的登录响应，不再仅取user字段
    case "LOGOUT":
      return { user: null };
    default:
      return state;
  }
};

2. 确保登录dispatch的payload正确

你的useLogin组件中的dispatch逻辑是正确的，不需要修改，因为已经将完整的result（包含token和user）作为payload传入：

dispatch({ type: "LOGIN", payload: result });

3. 验证localStorage的存储结构

确认后端登录接口返回的响应格式为类似如下结构（确保包含token和user字段）：

{
  "token": "your-jwt-token-here",
  "user": {
    "_id": "user-id",
    "email": "user@example.com"
  }
}

4. 检查后端中间件的依赖

你的requireAuth中间件缺少jwt的导入，需要补充：

import jwt from 'jsonwebtoken'; // 新增这行
import { userModel } from "../models/userModel.js";

const requireAuth = async (req, res, next) => {
  // ... 原有代码
};
export default requireAuth;

修复后流程说明 #

1. 用户登录成功后，后端返回包含token和user的完整响应，前端将其存入localStorage并通过dispatch更新AuthContext的state，此时state.user包含token属性。
2. Home组件的useEffect监听user变化，当user更新（登录完成）时，触发fetchWorkouts，此时user.token存在，能正确携带Authorization请求头。
3. 刷新页面时，AuthContext从localStorage读取完整的登录信息作为初始state，user.token依然存在，无需额外操作。

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