express-session中req.session.user异常变为undefined的问题求助

问题现象 #

• 修改server.js后，req.session.user会变为undefined
• 前端首次发起认证请求成功后，无法获取user.name和cookie，读取值均为undefined
• 服务器重启后首次请求失效，再次请求恢复正常，该状态持续到下次服务器重启

问题根源分析 #

1. 中间件顺序错误：CORS配置中间件在session中间件之后加载，导致跨域凭证（credentials）的处理晚于session初始化，影响cookie的正确传递
2. session存储机制限制：express-session默认使用内存存储，服务器重启后所有session都会丢失；同时saveUninitialized: false的配置可能导致session未被及时保存
3. 数据库连接未初始化：代码中直接使用db.query但未创建数据库连接实例，会导致登录接口执行失败，无法设置session
4. session保存时机问题：异步数据库查询后设置session，可能因事件循环机制导致session未被自动保存到存储中

修复方案 #

1. 调整中间件顺序 #

将CORS中间件移至session中间件之前，确保跨域配置优先生效：

const express = require("express");
const session = require("express-session");
const cors = require("cors");
const app = express();
const mysql = require("mysql2/promise");

app.use(express.json());

// 先加载CORS配置
app.use(
  cors({
    credentials: true,
    origin: ["http://localhost:3000"],
    methods: ["GET", "POST"],
  })
);

// 再加载session配置
app.use(
  session({
    key: "userId",
    secret: "your-strong-secret-key", // 替换为更安全的密钥，不要用明文"password"
    resave: false,
    saveUninitialized: false,
    cookie: {
      expires: 1000 * 60 * 60 * 24,
      sameSite: "lax", // 本地开发环境推荐用lax，跨域场景可设为"none"（需配合secure: true）
      secure: false, // 本地http环境设为false，生产https环境设为true
    },
  })
);

2. 初始化数据库连接 #

补充数据库连接代码，确保db实例存在：

// 新增数据库连接池初始化
const db = mysql.createPool({
  host: "localhost",
  user: "your-db-username", // 替换为你的数据库用户名
  password: "your-db-password", // 替换为你的数据库密码
  database: "your-db-name", // 替换为你的数据库名称
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0,
});

3. 确保session被正确保存 #

在登录接口中手动调用req.session.save()，保证session数据被持久化：

app.post("/login", async (req, res) => {
  const { userName, password } = req.body;

  try {
    const [result] = await db.query(
      `select * from user 
        where 
        user = ? and
        password = ? `,
      [userName, password]
    );

    if (result.length > 0) {
      req.session.user = {
        loggedIn: true,
        user_id: result[0].user_id,
        name: result[0].name,
      };
      // 手动保存session，确保异步操作后数据被写入存储
      req.session.save((err) => {
        if (err) {
          console.error(err);
          return res.status(500).send({ message: "会话保存失败" });
        }
        res.send(req.session.user);
      });
    } else {
      res.send({ message: "用户名或密码错误" });
    }
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: "服务器内部错误" });
  }
});

// 其余中间件和接口保持不变
app.use((req, res, next) => {
  console.log(req.session.user);
  next();
});

app.get("/login", (req, res) => {
  req.session.user
    ? res.send({
        loggedIn: true,
        name: req.session.user.name,
        user_id: req.session.user.user_id,
      })
    : res.send({ loggedIn: false });
});

// 别忘了添加端口监听
app.listen(3001, () => {
  console.log("服务器运行在http://localhost:3001");
});

4. 调整前端请求逻辑 #

确保登录成功后再获取用户信息，避免页面加载时未登录就请求导致的undefined：

import Axios from "axios";
import { useEffect, useState } from "react";

Axios.defaults.withCredentials = true;

function App() {
  const [user, setUser] = useState({
    loggedIn: false,
    name: "",
    user_id: "",
  });

  // 页面加载时检查登录状态
  useEffect(() => {
    Axios.get("http://localhost:3001/login").then(({ data }) => {
      setUser({
        loggedIn: data.loggedIn,
        name: data.name || "",
        user_id: data.user_id || "",
      });
      console.log(data);
    });
  }, []);

  // 登录操作示例
  const handleLogin = async (userName, password) => {
    try {
      const loginRes = await Axios.post("http://localhost:3001/login", {
        userName,
        password,
      });
      if (loginRes.data.loggedIn) {
        // 登录成功后重新获取用户信息
        const userRes = await Axios.get("http://localhost:3001/login");
        setUser({
          loggedIn: userRes.data.loggedIn,
          name: userRes.data.name,
          user_id: userRes.data.user_id,
        });
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      {/* 示例登录按钮 */}
      <button onClick={() => handleLogin("test", "test123")}>登录</button>
      <p>当前用户：{user.name || "未登录"}</p>
    </div>
  );
}

export default App;

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