如何在Express JS中维持登录用户Session内的跨页面数据

核心原因分析 #

你遇到的问题本质是后端Session数据没有传递到前端模板/页面——虽然req.session.user在登录路由里能正常获取，但其他路由没把这个数据注入到前端可访问的上下文里，导致前端直接调用user时触发Uncaught ReferenceError。

具体解决步骤 #

1. 全局中间件注入Session用户数据 #

在app.js里添加全局中间件，把req.session.user挂载到res.locals（Express模板引擎的全局变量池），这样所有模板页面都能直接访问user变量：

// app.js 中，务必放在路由配置之前
app.use((req, res, next) => {
  // 将Session中的用户数据存入全局模板变量，未登录则设为null
  res.locals.user = req.session.user || null;
  next();
});

2. 前端模板正确引用用户数据 #

如果你用EJS/Pug这类服务端模板引擎，直接在页面里用user变量即可：

<!-- EJS示例 -->
<header>
  <% if (user) { %>
    <span>欢迎<%= user.username %></span>
    <a href="/logout">登出</a>
  <% } else { %>
    <a href="/sign-in">登录</a>
  <% } %>
</header>

如果是静态HTML页面，需要后端提供一个获取当前用户的API，前端通过AJAX请求拉取数据：

// 前端页面加载时执行
fetch('/api/current-user')
  .then(res => res.json())
  .then(data => {
    if (data.user) {
      document.querySelector('.welcome-text').textContent = `欢迎${data.user.username}`;
    }
  });

对应后端API路由：

// 新建routes/api.js或在现有路由中添加
router.get('/api/current-user', (req, res) => {
  res.json({ user: req.session.user || null });
});

3. 检查Session配置关键参数 #

确认express-session的配置没有遗漏核心参数：

const session = require('express-session');
app.use(session({
  secret: 'your-secure-secret-key', // 替换为实际安全密钥
  resave: false, // 避免无变化时重复存储Session
  saveUninitialized: false, // 不创建未初始化的Session
  cookie: {
    maxAge: 24 * 60 * 60 * 1000, // Session有效期1天
    httpOnly: true // 禁止前端JS读取Cookie，提升安全性
  }
}));

4. 确认路由加载顺序 #

所有需要访问Session的路由，必须在express-session中间件之后定义，否则路由无法读取req.session。比如app.use(session(...))要放在app.use('/home', homeRouter)这类路由配置前面。

关于LocalStorage的补充 #

LocalStorage是前端独立存储机制，和后端Session完全脱节——你之前存的数据只是前端本地副本，和后端Session状态不同步，自然无法解决跨页面的用户数据同步问题。用后端注入或API拉取的方式，能保证数据和Session状态完全一致，安全性也更高。

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