如何在HTML文件中显示Node.js路由中的session.userid变量？

问题根源 #

后端的req.session是服务器端专属的会话存储，前端浏览器根本无法直接访问这个变量，所以你直接写session.userid会报错或者拿到undefined。

三种可行解决方案 #

方案一：用模板引擎渲染页面（推荐）

用EJS、Pug这类模板引擎把后端的session数据直接注入到HTML中：

1. 安装EJS：

npm install ejs

2. 在Express里配置模板引擎：

app.set('view engine', 'ejs');
// 把admin.html改名为admin.ejs，放到views目录下（默认路径）

3. 修改登录路由，替换res.sendFile为渲染模板：

// 原代码res.sendFile(...)替换成：
res.render('admin', { username: req.session.userid });

4. 在admin.ejs里直接使用变量：

<!-- 直接在HTML中显示 -->
<div id="username"><%= username %></div>

<!-- 或者在脚本中使用 -->
<script>
const username = '<%= username %>';
document.getElementById("username").innerHTML = username;
</script>

方案二：手动替换HTML内容（不用模板引擎）

如果不想改模板引擎，可以读取HTML文件后替换占位符：

1. 修改登录路由：

const fs = require('fs');
const adminHtmlPath = path.resolve(__dirname, '../public/admin.html');

fs.readFile(adminHtmlPath, 'utf8', (err, htmlContent) => {
  if (err) {
    console.error(err);
    return res.status(500).send('服务器出错');
  }
  // 把HTML里的{{username}}占位符替换成实际用户名
  const renderedHtml = htmlContent.replace('{{username}}', req.session.userid);
  res.send(renderedHtml);
});

2. 在admin.html里加占位符：

<div id="username">{{username}}</div>

方案三：前端AJAX请求用户信息

前端主动发请求到后端接口获取用户名：

1. 后端新增接口：

router.get('/api/current-user', (req, res) => {
  if (req.session.userid) {
    res.json({ username: req.session.userid });
  } else {
    res.status(401).json({ msg: '未登录' });
  }
});

2. 修改前端脚本：

<script>
function setUsername() {
  fetch('/api/current-user')
    .then(res => res.json())
    .then(data => {
      document.getElementById("username").innerHTML = data.username;
    })
    .catch(err => console.log(err));
}
// 页面加载时自动调用
window.onload = setUsername;
</script>

额外提示：修复登录逻辑的bug #

你现在的登录逻辑有问题：分别查询用户名和密码，会导致不同用户的密码匹配时误判。正确做法是先查用户，再对比密码（注意密码不能明文存储，要用bcrypt加密）：

const checkUser = await user.findOne({ name: name });
// 假设密码存在checkUser.password里，且是bcrypt加密后的
if (checkUser && await bcrypt.compare(pass, checkUser.password)) {
  req.session.userid = req.body.name;
  // 后续登录成功逻辑
} else {
  res.send('用户未注册或密码错误');
}

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