如何在Passport Local认证失败后不跳转，保留Bootstrap模态框并显示CSS提示？

当然可以实现你想要的无跳转效果！Passport的authenticate中间件其实支持自定义回调函数，这样你就能完全控制认证成功或失败后的响应逻辑，不用依赖默认的successRedirect和failureRedirect。下面是具体的实现步骤：

1. 修改后端路由，使用自定义回调 #

把你原来的路由代码替换成下面的版本，这样我们可以手动处理认证结果，返回JSON而不是重定向：

router.post("/login", (req, res, next) => {
  passport.authenticate("local", (err, user, info) => {
    // 处理服务器内部错误
    if (err) {
      return res.status(500).json({ error: "服务器内部错误，请稍后重试" });
    }
    // 认证失败（用户名/密码错误等）
    if (!user) {
      // info参数会包含你之前用failureFlash设置的提示信息，也可以自定义
      const errorMsg = info?.message || "登录失败，用户名或密码错误";
      return res.status(401).json({ error: errorMsg });
    }
    // 认证成功，手动完成用户登录（passport的req.logIn方法）
    req.logIn(user, (loginErr) => {
      if (loginErr) {
        return res.status(500).json({ error: "登录过程出错，请稍后重试" });
      }
      // 登录成功后，告诉前端要跳转的页面
      return res.json({ redirectUrl: "/profile" });
    });
  })(req, res, next); // 注意这里要手动调用中间件函数
});

2. 前端改用AJAX提交表单 #

原来的表单默认提交会导致页面跳转，所以我们需要用AJAX来发送登录请求，这样就能保持页面（和模态框）的状态。下面是原生JS的实现示例：

// 给登录表单绑定提交事件
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认的表单跳转行为
  
  // 收集表单数据
  const formData = new FormData(this);
  
  // 发送POST请求
  fetch('/login', {
    method: 'POST',
    body: formData,
    credentials: 'include' // 必须带上这条，确保会话Cookie能被传递
  })
  .then(response => response.json())
  .then(data => {
    const errorElement = document.getElementById('loginError');
    if (data.error) {
      // 显示错误提示，保持模态框打开
      errorElement.textContent = data.error;
      errorElement.classList.remove('d-none');
    } else {
      // 登录成功，跳转到个人中心页面
      window.location.href = data.redirectUrl;
    }
  })
  .catch(err => {
    console.error('请求出错:', err);
    const errorElement = document.getElementById('loginError');
    errorElement.textContent = '网络请求失败，请检查网络连接';
    errorElement.classList.remove('d-none');
  });
});

3. 在Bootstrap模态框中添加错误提示元素 #

在你的登录模态框里，加上一个用于显示错误的容器，比如：

<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">
        <!-- 错误提示容器，默认隐藏 -->
        <div id="loginError" class="alert alert-danger d-none"></div>
        
        <form 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>
          <button type="submit" class="btn btn-primary">登录</button>
        </form>
      </div>
    </div>
  </div>
</div>

补充说明 #

• 关于req.flash：如果你之前配置了flash消息，自定义回调里的info参数会自动包含failureFlash设置的内容，直接用就行。
• 会话保持：AJAX请求里的credentials: 'include'非常重要，它会让浏览器在请求时带上服务器设置的Session Cookie，这样登录成功后用户的会话才能被正确保持。
• 错误状态码：示例中返回了401（未授权）状态码，你也可以根据需要调整，但前端要确保能正确解析JSON响应。

这样就能实现你想要的效果：登录失败时，页面不跳转，Bootstrap模态框保持打开，同时显示样式化的错误提示；登录成功后再跳转到个人中心页面。

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