基于Express+EJS+Passport的站点登录后导航栏元素动态切换实现咨询

第一步：配置Express后端全局模板变量 #

你之前用<% if (isLoggedIn) %>不生效大概率是没有把登录状态变量同步给EJS模板，添加以下中间件可以让所有EJS页面直接拿到登录状态，不需要每个路由单独传参：

// 这段代码要放在session配置、passport初始化代码之后，路由定义之前
app.use((req, res, next) => {
  // 挂载全局登录状态变量
  res.locals.isLoggedIn = req.isAuthenticated();
  // 可选：挂载当前登录用户信息，方便后续显示用户名、头像等
  res.locals.currentUser = req.user;
  next();
});

// 先配置好登出路由，示例如下
app.post('/logout', (req, res, next) => {
  req.logout((err) => {
    if (err) return next(err);
    res.redirect('/');
  });
});

第二步：替换导航栏EJS代码 #

直接用以下代码替换你原有的导航栏代码即可：

<header> <!-- home page -->
  <div class="container">
    <img src="/images/logo.png" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/articoli">Articoli</a></li>
        <li><a href="/serie">Serie</a></li>
        <% if (isLoggedIn) { %>
          <!-- 已登录状态：显示个人中心入口+登出按钮 -->
          <li><a href="/profilo"><img src="/images/user-icon.png" alt="个人中心" style="width:20px;height:20px;vertical-align:middle;"></a></li>
          <li>
            <form action="/logout" method="POST" style="display:inline;">
              <button type="submit" style="background:none;border:none;color:inherit;cursor:pointer;padding:0;font:inherit;">登出</button>
            </form>
          </li>
        <% } else { %>
          <!-- 未登录状态：显示登录注册入口 -->
          <li><a href="/accedi">Accedi</a></li>
          <li><a href="/iscriviti">Iscriviti</a></li>
        <% } %>
      </ul>
    </nav>
  </div>
</header>

你可以自行调整个人中心的图标路径、按钮样式，匹配现有设计风格即可。确认Passport的session配置正常，登录接口调用req.login()成功后再重定向到首页即可生效。

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