登录后在页面显示MongoDB用户用户名的实现问题

要实现登录后在首页显示用户名，需要完成传递用户名到模板和持久化登录状态两个核心操作，以下是具体修改步骤：

1. 安装并配置会话管理依赖 #

首先安装express-session来保存用户登录状态（避免刷新页面后丢失登录信息）：

npm install express-session

修改index.js，引入并配置会话，同时完善路由逻辑：

const express = require('express')
const app = express()
const path = require('path')
const hbs = require('hbs')
const collection = require('./mongodb')
const session = require('express-session') // 新增会话依赖

const templatePath = path.join(__dirname, '../templates')

// 新增会话配置
app.use(session({
  secret: 'your-custom-secret-key', // 替换为自定义加密密钥，比如随机字符串
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false } // 开发环境用false，生产环境启用HTTPS后改为true
}))

app.use(express.static('public'))
app.use('/css', express.static(__dirname + 'public/stylesheets'))
app.use(express.json())
app.set('view engine', 'hbs')
app.set('views', templatePath)
app.use(express.urlencoded({extended:false}))

// 新增home页面GET路由，验证登录状态
app.get('/home', (req, res) => {
  if (req.session.username) {
    // 已登录，渲染首页并传递用户名
    res.render('home', { username: req.session.username })
  } else {
    // 未登录，跳转至登录页
    res.redirect('/')
  }
})

app.get('/', (req, res) => {
  res.render('login')
})

app.get('/signup', (req, res) => {
  res.render('signup')
})

app.post('/signup', async(req, res) => {
  const data = {
    username: req.body.username,
    password: req.body.password
  }
  await collection.insertMany([data])
  res.render('login')
})

// 修改登录路由，保存用户名到会话并传递给模板
app.post('/login', async(req, res) => {
  try {
    const check = await collection.findOne({username: req.body.username})
    if(check.password === req.body.password) {
      // 将用户名存入会话，保持登录状态
      req.session.username = req.body.username
      // 渲染首页时传递用户名
      res.render('home', { username: req.body.username })
    } else {
      res.send('Wrong password')
    }
  } catch {
    res.send('Wrong sign-in credentials')
  }
})

app.listen(3000, () => {
  console.log('port is running, betta go catch it!')
})

2. 修改首页模板显示用户名 #

在首页的HTML片段中，使用HBS模板语法插入用户名变量：

<div class="top-nav-left">
  <span class="logged-in-as">Logged in as: {{username}}</span>
</div>

补充提示 #

• 会话配置中的secret务必替换为自己的随机字符串，保障会话安全性
• 当前代码中密码为明文存储，建议后续使用bcrypt等工具加密存储密码，避免数据泄露风险

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