登录后Navbar无法显示用户用户名和头像的问题求助

排查步骤与解决方案 #

1. 统一Cookie获取逻辑，避免状态不同步

你当前使用了两次useCookies钩子，可能导致userID的获取延迟或不一致。合并成一次调用，简化依赖逻辑：

// 替换原有的两次useCookies调用
const [cookies, setCookie, removeCookie] = useCookies(["access_token", "userID"]);
const userID = cookies.userID;
// 移除原有的useMemo相关代码

2. 添加请求日志，定位问题节点

在fetchUserData函数中添加日志，确认userID是否正确、请求是否发送、响应是否正常：

const fetchUserData = async () => {
  console.log("当前获取的userID:", userID); // 验证userID是否正确读取
  try {
    const response = await axios.get(`http://localhost:3001/auth/profile/${userID}`, {
      withCredentials: true // 强制携带Cookie，适配后端身份验证
    });
    console.log("接口返回的用户数据:", response.data); // 查看接口返回内容
    setUserData(response.data);
  } catch (error) {
    // 打印详细错误信息，包括后端返回的错误内容
    console.error("获取用户数据失败:", error.response?.data || error.message);
  }
};

3. 确保Axios请求携带Cookie

如果后端接口需要通过Cookie中的access_token验证身份，Axios默认不会自动携带Cookie，必须显式设置withCredentials: true，否则后端可能返回未授权错误，导致userData一直为null。

4. 检查后端CORS配置

若前端运行在http://localhost:3000、后端在http://localhost:3001，需确保后端CORS配置允许携带Cookie：

// Express后端示例
const cors = require('cors');
app.use(cors({
  origin: "http://localhost:3000", // 前端地址
  credentials: true // 允许请求携带Cookie
}));

5. 验证Cookie存储的正确性

登录时设置userID Cookie，需指定path="/"确保全站路由都能读取：

// 登录成功后设置Cookie示例
setCookie("userID", userID, { path: "/", maxAge: 3600 });

6. 后端接口添加身份验证（可选但建议）

当前/profile/:userID接口未验证请求者身份，存在安全风险。建议添加JWT验证中间件，确保只有登录用户能获取自己的信息：

// JWT验证中间件示例
const jwt = require('jsonwebtoken');
const authenticateToken = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) return res.status(401).json({ message: "未授权" });
  
  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.status(403).json({ message: "无效token" });
    req.user = user;
    // 确保请求的userID与token中的用户ID一致
    if (req.params.userID !== user.id) return res.status(403).json({ message: "无权访问" });
    next();
  });
};

// 给profile接口应用中间件
router.get("/profile/:userID", authenticateToken, async (req, res) => {
  // 原有业务逻辑...
});

核心排查重点 #

• userID是否从Cookie中正确读取
• Axios请求是否携带Cookie并成功发送
• 后端是否返回预期的用户数据
• 跨域配置是否允许Cookie传递

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