如何在导航栏根据登录状态切换显示登录/登出按钮及用户名？

错误原因 #

1. req.body的局限性：req.body仅在POST请求（如登录/注册表单提交）中包含数据，在GET请求加载页面时req.body为空对象，直接访问req.body.username必然返回undefined。
2. Passport用户存储位置错误：用户登录后，Passport会将用户信息存储在req.user中，而非req.body。
3. 模板无法直接访问req对象：EJS模板默认不能直接读取req，必须通过res.locals将需要的数据注入模板上下文。

修正步骤 #

1. 更新全局中间件（app.js） #

在现有中间件中添加用户信息传递，让所有模板都能访问登录用户数据：

app.use(function (req, res, next) {
  res.locals.isAuthenticated = req.isAuthenticated();
  // 将登录用户信息注入模板上下文
  res.locals.currentUser = req.user;
  next();
});

2. 修正导航栏EJS模板（navbar.ejs） #

使用isAuthenticated判断登录状态，通过currentUser.username显示用户名：

<ul class="navbar">
  <p>USER PANEL</p>
  <% if (isAuthenticated) { %>
    <!-- 已登录状态 -->
    <li>欢迎, <%= currentUser.username %></li>
    <li><a href="/users/logout">Logout</a></li>
  <% } else { %>
    <!-- 未登录状态 -->
    <li><a href="/users/login">Login</a></li>
    <li><a href="/users/register">Register</a></li>
  <% } %>
</ul>

3. 优化登录逻辑（可选，userController.js） #

原login_account方法可简化，Passport的authenticate中间件已内置req.login处理：

exports.login_account = passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/users/login'
});

修改后即可实现：

• 登录状态下显示用户名与Logout按钮
• 未登录状态下显示Login/Register按钮
• 彻底消除undefined错误

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