React.js+Node.js项目如何正确删除Cookie实现用户登出功能

1 优先修复后端配置笔误 #

你的express-session配置存在属性名拼写错误，自定义Cookie配置完全未生效：

// 错误写法：配置项为单数cookie，不是复数cookies
app.use(
  session({
    key: "userId",
    secret: "subscribe",
    resave: false,
    saveUninitialized: false,
    cookies: {
      expires: 60 * 60 * 8,
    },
  })
);

// 修正后写法
app.use(
  session({
    key: "userId",
    secret: "subscribe",
    resave: false,
    saveUninitialized: false,
    cookie: {
      expires: 60 * 60 * 8,
      httpOnly: true // 建议开启，防止XSS攻击盗取Cookie
    },
  })
);

2 修正前端Cookie删除逻辑 #

如果后端设置Cookie时未显式指定domain，删除时传入domain参数会因为属性不匹配导致删除失败，同时需要清空Redux中的用户状态，否则页面仍会显示登录状态：

function logout() {
  // 删除时仅保留和后端配置一致的path参数，去掉domain
  Cookies.remove("userId", { path: "/" });
  localStorage.clear();
  // 新增：清空Redux中的用户信息，示例如下，按你实际的redux action调整
  // dispatch(clearUserInfo());
  history.push("/login");
}

注意：如果Cookie开启了httpOnly属性，前端JavaScript没有操作权限，无法用js-cookie删除，必须通过后端接口处理。

3 推荐方案：新增后端登出接口 #

前端直接删Cookie的方式不安全，服务端的session仍会残留，建议新增后端登出接口统一处理：

后端新增接口代码 #

app.post("/api/logout", (req, res) => {
  // 销毁服务端存储的session
  req.session.destroy((err) => {
    if (err) return res.status(500).json({ msg: "登出失败" });
    // 主动清除客户端Cookie
    res.clearCookie("userId", { path: "/" });
    res.json({ success: true });
  });
});

前端调整logout逻辑 #

import axios from "axios";

async function logout() {
  // 调用后端登出接口
  await axios.post("/api/logout");
  localStorage.clear();
  // 清空Redux用户状态
  // dispatch(clearUserInfo());
  history.push("/login");
}

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