Express(Node.js)项目：用Bootstrap模态框替代登录路由实现登录

嘿，我来帮你搞定把登录表单改成Bootstrap模态框的事儿，结合你现有的Express+isLoggedIn中间件架构，分几步来操作就好：

首先确保你的页面已经引入了Bootstrap的CSS和JS（Bootstrap 5需要Popper.js，Bootstrap 4需要jQuery），然后把登录表单放到模态框结构里，表单的action和method保持和原来一致就行：

<!-- 触发模态框的按钮（比如放在需要登录的操作旁，比如评论按钮） -->
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
  请先登录
</button>

<!-- 登录模态框核心代码 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel">账号登录</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 保留原表单的action和method，同时加上ID方便后续处理 -->
        <form action="/login" method="POST" id="loginForm">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input type="text" class="form-control" id="username" name="username" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password" name="password" required>
          </div>
          <!-- 如果你用了CSRF保护（比如Express的csurf中间件），一定要加这个隐藏字段 -->
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          
          <!-- 登录失败的提示区域（配合flash消息使用） -->
          <% if (loginError) { %>
          <div class="alert alert-danger mt-2"><%= loginError %></div>
          <% } %>
          
          <button type="submit" class="btn btn-primary w-100">登录</button>
        </form>
      </div>
    </div>
  </div>
</div>

原来的中间件可能会直接重定向到/login，现在要改成记录用户原本想访问的页面，然后让前端弹出模态框：

function isLoggedIn(req, res, next) {
  // 假设你用passport.js做身份校验，或者自己的session判断逻辑
  if (req.isAuthenticated()) {
    return next();
  }

  // 把用户当前请求的URL存到session，登录后跳回这里
  req.session.returnTo = req.originalUrl;

  // 区分AJAX请求和普通页面请求
  if (req.xhr) {
    // 给前端返回需要登录的信号
    return res.status(401).json({ needLogin: true });
  }

  // 普通页面请求：渲染当前页面，并传递需要弹出模态框的标记
  res.render('当前页面的模板名称', { showLoginModal: true });
}

登录成功后，要跳回用户原本想访问的页面，失败则回到模态框显示错误：

// 假设你用passport-local做认证
app.post('/login', passport.authenticate('local', {
  failureRedirect: '/', // 登录失败返回首页（或者当前页面）
  failureFlash: true, // 用connect-flash存储错误信息
  successRedirect: '/' // 这里会被下面的逻辑覆盖，先随便写
}), (req, res) => {
  // 跳回之前记录的页面，没有的话默认首页
  const returnTo = req.session.returnTo || '/';
  delete req.session.returnTo;
  res.redirect(returnTo);
});

然后在模板里添加自动弹出模态框的脚本：

<% if (showLoginModal) { %>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
    loginModal.show();
  });
</script>
<% } %>

如果想要更流畅的体验，可以用AJAX提交表单，不用刷新页面：

document.getElementById('loginForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    const response = await fetch('/login', {
      method: 'POST',
      body: formData,
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    const result = await response.json();
    
    if (result.success) {
      // 登录成功：关闭模态框 + 刷新页面/跳回目标页
      const loginModal = bootstrap.Modal.getInstance(document.getElementById('loginModal'));
      loginModal.hide();
      window.location.href = result.returnTo || window.location.href;
    } else {
      // 登录失败：显示错误提示
      const errorDiv = document.createElement('div');
      errorDiv.className = 'alert alert-danger mt-2';
      errorDiv.textContent = result.message || '用户名或密码错误';
      e.target.parentNode.appendChild(errorDiv);
      setTimeout(() => errorDiv.remove(), 3000);
    }
  } catch (err) {
    console.error('登录请求失败:', err);
  }
});

对应的后端路由也要改成支持JSON返回：

app.post('/login', (req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    if (err) return next(err);
    if (!user) {
      return res.status(401).json({ success: false, message: info.message });
    }
    req.logIn(user, (err) => {
      if (err) return next(err);
      const returnTo = req.session.returnTo || '/';
      delete req.session.returnTo;
      res.json({ success: true, returnTo });
    });
  })(req, res, next);
});

• 一定要确保Bootstrap的依赖（Popper.js/jQuery）正确引入，不然模态框可能无法正常弹出。
• 如果你没使用passport.js，只需要把上面的认证逻辑换成你自己的session校验代码就行，核心是记录用户的目标URL和处理登录后的跳转。

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