React Context Hook中loggedIn状态不更新的MERN认证问题

• 第一步：先确认接口实际返回值
  在你的getLoggedIn方法中打印响应数据，确认浏览器环境下接口是否真的返回true，Postman测试正常不代表浏览器请求正常，Postman会自动携带你手动设置的Cookie，但浏览器跨域请求默认不会携带：

  const getLoggedIn = async () => {
    await Axios.get("http://localhost:5000/auth/loggedIn")
      .then((res) => {
        console.log("接口返回值：", res.data) // 新增打印，查看控制台输出
        setLoggedIn(res.data)
      })
      .catch((err) => console.log(err));
  };
  

• 第二步：配置Axios跨域携带凭证
  你的前端和后端端口不同属于跨域请求，默认Axios不会携带Cookie，需要手动开启withCredentials配置，修改请求代码：

  await Axios.get("http://localhost:5000/auth/loggedIn", {
    withCredentials: true // 新增配置，请求时携带Cookie
  })
  

  也可以全局配置，在项目入口文件（如index.js）中添加：

  import Axios from "axios";
  Axios.defaults.withCredentials = true;
  

• 第三步：配置后端CORS允许凭证
  后端要同步开启跨域凭证支持，否则浏览器会拦截响应。如果你使用cors中间件，修改配置如下：

  const cors = require("cors");
  app.use(cors({
    origin: "http://localhost:3000", // 必须指定前端地址，不能用*
    credentials: true // 允许携带凭证
  }));
  

• 第四步：检查Cookie配置正确性
  确认你登录接口设置Cookie时，domain、sameSite属性符合本地开发要求：

  res.cookie("token", 生成的jwt值, {
    httpOnly: true,
    sameSite: "lax", // 本地开发不要设为none，否则需要配合secure: true
    path: "/",
    maxAge: 7 * 24 * 60 * 60 * 1000 // 自定义过期时间
  })
  

• 第五步：优化初始状态渲染逻辑
  你当前loggedIn初始值为undefined，首次渲染时两个条件分支都不会命中，可以添加加载态避免逻辑异常：

  {loggedIn === undefined && <span>加载中...</span>}
  {loggedIn === false && (
    <Link className="nav-link" to="/login">
      <FaUser />
    </Link>
  )}
  {loggedIn === true && (
    <Link className="nav-link" to="/logout">
      <Button variant="outline-dark">Logout</Button>
    </Link>
  )}
  

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