Google Auth登出后刷新自动登录及控制台重复输出问题求助

问题1：登出后刷新页面自动重新登录 #

原因 #

1. 前端登出仅更新了Context状态，未调用后端/logout接口，导致后端的Passport会话和用户信息未被清除。
2. 后端/logout接口未彻底销毁会话和清除会话Cookie，Passport仍能识别已登录状态。

修复代码 #

前端修改handleLogout函数：

const handleLogout = () => {
  fetch("http://localhost:4000/logout", {
    method: "GET",
    credentials: "include",
  })
  .then(() => {
    dispatch({ type: "LOGOUT" });
    setUser(null); // 清除前端本地用户状态
  })
  .catch(err => console.error("登出失败:", err));
};

后端完善/logout路由：

router.get("/logout", (req, res, next) => {
  // Passport的logout是异步操作，需用回调处理
  req.logout((err) => {
    if (err) return next(err);
    
    // 彻底销毁服务器端会话
    req.session.destroy((err) => {
      if (err) return next(err);
      
      // 清除客户端的会话Cookie（Cookie名称需与express-session配置的name一致，默认是connect.sid）
      res.clearCookie("connect.sid", {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production", // 生产环境启用secure
        sameSite: "strict"
      });
      
      res.redirect("http://localhost:3000/");
    });
  });
});

问题2：后端console.log("CURRNT USER: ", user)持续重复输出 #

原因 #

1. 登出不彻底导致每次刷新页面时，前端仍会调用/googleLogin/success接口，后端req.user仍存在，触发日志输出。
2. 原代码中console.log位于if(req.user)块的末尾，部分分支（如邮箱已存在的情况）中user变量未定义，且无论分支结果都会执行日志输出。

修复代码 #

后端调整/googleLogin/success路由的日志位置：

router.get("/googleLogin/success", async (req, res) => {
  if (req.user) {
    let user = await User.findOne({ provider_id: req.user.id, provider: req.user.provider });
    if (user) {
      res.status(200).json({
        success: true,
        message: "success",
        user: user
      });
      // 仅在成功获取已有用户时输出日志
      console.log("CURRNT USER: ", user);
    } else {
      const checkUserEmail = await User.findOne({ email: req.user.email });
      if (checkUserEmail) {
        res.status(401).json({
          success: false,
          message: "User already Exist with this email id",
        });
        // 此分支无有效用户，无需输出日志
      } else {
        user = await User.create({
          username: req.user.name.givenName + "_" + req.user.name.familyName,
          email: req.user.emails[0].value,
          provider: req.user.provider,
          provider_id: req.user.id
        });
        res.status(200).json({
          success: true,
          message: "success",
          user: user
        });
        // 仅在成功创建新用户时输出日志
        console.log("CURRNT USER: ", user);
      }
    }
  } else {
    // 用户未登录时返回明确的未认证响应
    res.status(401).json({
      success: false,
      message: "User not authenticated"
    });
  }
});

前端完善请求失败后的状态处理：

useEffect(() => {
  const getUser = () => {
    fetch("http://localhost:4000/googleLogin/success", {
      method: "GET",
      credentials: "include",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.status === 200) return response.json();
        throw new Error("authentication has been failed!");
      })
      .then((resObject) => {
        setUser(resObject.user);
        dispatch({ type: "LOGIN_START" });
        if (resObject.user.email) {
          dispatch({ type: "LOGIN_SUCCESS", payload: resObject.user });
        } else {
          dispatch({ type: "LOGIN_FAILURE" });
        }
      })
      .catch((err) => {
        console.log(err);
        // 请求失败时同步更新前端登出状态
        dispatch({ type: "LOGOUT" });
        setUser(null);
      });
  };
  getUser();
}, []);

内容的提问来源于stack exchange，提问作者sultan.h