点击链接时修改EJS变量值的技术实现咨询

我来帮你搞定这个问题～你现在的代码是后端渲染时传递Login变量来控制显示，但点击链接是前端操作，要实现状态切换，得让前后端配合维护登录状态，下面给你两种常用的实现方案：

方案一：传统页面刷新式（简单易上手） #

这种方式是通过点击链接请求后端接口，后端把登录状态存在session里，之后重新渲染页面时传递更新后的Login值，非常适合简单的场景。

1. 后端（app.js）改造 #

首先得用express-session来保存用户的登录状态，先安装依赖（npm install express-session），然后修改代码：

const express = require('express');
const session = require('express-session');
const app = express();

// 配置session，secret换成你自己的密钥
app.use(session({
  secret: 'your-own-secret-key-here',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false } // 开发环境用false，生产环境建议开HTTPS后设为true
}));

// 首页路由：从session里取登录状态，默认未登录
app.get('/', (req, res) => {
  const isLoggedIn = req.session.isLoggedIn || false;
  res.render("index", { Login: isLoggedIn });
});

// 登录接口：标记session为已登录，然后重定向回首页
app.get('/login', (req, res) => {
  req.session.isLoggedIn = true;
  res.redirect('/');
});

// 注销接口：标记session为未登录，重定向回首页
app.get('/logout', (req, res) => {
  req.session.isLoggedIn = false;
  // 要是想彻底销毁session，也可以用req.session.destroy()
  res.redirect('/');
});

2. 前端（header.ejs）修改 #

把原来的空链接改成指向后端的登录/注销接口就行：

<% if (Login) { %>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link h3" href="/logout">Logout</a>
    </li>
  </ul>
<% } else { %>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link h3" href="/login">Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link h3" href="#" id="Register">Register</a>
    </li>
  </ul>
<% } %>

现在点击Login/Logout链接，就会请求后端修改session状态，然后页面重定向回首页，后端会根据更新后的session传递新的Login变量，页面就自动切换显示内容了。

方案二：AJAX无刷新切换（更流畅的用户体验） #

如果不想每次点击都刷新整个页面，就用AJAX请求后端接口，然后前端动态修改DOM，同时后端也会更新session状态，下次刷新页面也能保持正确状态。

1. 后端（app.js）新增接口 #

保留刚才的session配置，新增两个返回JSON的接口：

// 登录接口（返回JSON，用于AJAX请求）
app.get('/api/login', (req, res) => {
  req.session.isLoggedIn = true;
  res.json({ success: true, isLoggedIn: true });
});

// 注销接口（返回JSON，用于AJAX请求）
app.get('/api/logout', (req, res) => {
  req.session.isLoggedIn = false;
  res.json({ success: true, isLoggedIn: false });
});

2. 前端（header.ejs）修改 #

给链接添加点击事件，用fetch发送AJAX请求，然后动态替换导航栏的内容：

<% if (Login) { %>
  <ul class="nav justify-content-end" id="navBar">
    <li class="nav-item">
      <a class="nav-link h3" href="#" id="logoutBtn">Logout</a>
    </li>
  </ul>
<% } else { %>
  <ul class="nav justify-content-end" id="navBar">
    <li class="nav-item">
      <a class="nav-link h3" href="#" id="loginBtn">Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link h3" href="#" id="Register">Register</a>
    </li>
  </ul>
<% } %>

<script>
// 登录按钮点击事件
async function handleLogin(e) {
  e.preventDefault(); // 阻止默认跳转行为
  const response = await fetch('/api/login');
  const data = await response.json();
  if (data.success) {
    // 替换导航栏为注销状态
    document.getElementById('navBar').innerHTML = `
      <li class="nav-item">
        <a class="nav-link h3" href="#" id="logoutBtn">Logout</a>
      </li>
    `;
    // 给新的注销按钮绑定点击事件
    document.getElementById('logoutBtn').addEventListener('click', handleLogout);
  }
}

// 注销按钮点击事件
function handleLogout(e) {
  e.preventDefault();
  fetch('/api/logout')
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        // 替换导航栏为登录状态
        document.getElementById('navBar').innerHTML = `
          <li class="nav-item">
            <a class="nav-link h3" href="#" id="loginBtn">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link h3" href="#" id="Register">Register</a>
          </li>
        `;
        // 给新的登录按钮绑定点击事件
        document.getElementById('loginBtn').addEventListener('click', handleLogin);
      }
    });
}

// 页面加载时给对应的按钮绑定事件
document.getElementById('loginBtn')?.addEventListener('click', handleLogin);
document.getElementById('logoutBtn')?.addEventListener('click', handleLogout);
</script>

这样用户点击链接时，页面不会刷新，直接通过JS动态切换显示内容，同时后端也更新了session，下次刷新页面也会保持正确的登录状态。

关键提醒 #

• 一定要用session来持久化登录状态，不能只靠渲染时传递的Login变量——因为前端的变量是一次性的，页面刷新就没了，而session存在服务器端（或客户端cookie），能长期保存状态。
• 方案一适合快速实现，方案二更适合追求流畅体验的现代网页，你可以根据自己的需求选。

内容的提问来源于stack exchange，提问作者Alex Gioffre'