Express使用Passport如何实现无刷新登录错误捕获

• 完全支持手动向客户端返回自定义响应数据，不需要受Passport默认的重定向逻辑限制
• 不建议借助flash实现该需求：flash是服务端渲染+页面跳转场景下的临时消息传递方案，完全适配不了fetch发起的无刷新异步交互

具体改造方案 #

你现有的Passport本地策略配置不需要做任何修改，之前已经定义好的「用户不存在」「密码错误」两类错误提示，会在认证时自动透传到回调参数中，只需要调整登录接口的路由处理逻辑、配合前端fetch拦截表单默认提交即可。

1. 修改登录POST路由 #

去掉原来passport.authenticate配置里写死的重定向、flash参数，改用自定义认证回调处理结果，直接返回JSON格式响应：

.post((req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    // 处理服务端运行错误
    if (err) return res.status(500).json({ code: 500, message: '服务器内部错误' })
    // 处理认证失败场景：用户不存在/密码错误，info.message就是你之前在策略里定义的错误提示
    if (!user) return res.status(401).json({ code: 401, message: info.message })
    // 认证成功后手动调用req.login写入登录session
    req.login(user, (loginErr) => {
      if (loginErr) return res.status(500).json({ code: 500, message: '登录状态写入失败' })
      // 返回成功标识和跳转地址，前端拿到后自行处理跳转
      return res.status(200).json({ code: 200, message: '登录成功', redirect: '/' })
    })
  })(req, res, next)
})

2. 前端fetch交互逻辑 #

拦截表单的默认提交行为（避免页面重载），用fetch发起异步请求，注意要配置携带同域cookie，否则服务端无法识别session：

const loginForm = document.querySelector('#loginForm')
const errorTip = document.querySelector('#errorTip') // 页面上用来显示错误提示的元素

loginForm.addEventListener('submit', async (e) => {
  e.preventDefault() // 阻止表单默认提交触发的页面刷新
  errorTip.textContent = '' // 提交前先清空旧的错误提示

  const formData = new FormData(loginForm)
  const payload = Object.fromEntries(formData.entries())

  try {
    const res = await fetch('/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
      credentials: 'same-origin' // 必须配置，否则请求不会携带cookie
    })
    const result = await res.json()

    if (result.code !== 200) {
      errorTip.textContent = result.message
      return
    }
    // 登录成功后跳转到首页
    window.location.href = result.redirect
  } catch (err) {
    errorTip.textContent = '网络异常，请稍后重试'
  }
})

为什么flash不适用 #

express-flash的工作逻辑是把临时消息存储在session中，跟随302重定向响应到下一个页面，在服务端渲染模板时读取消息注入到HTML里。如果你保留默认的failureRedirect配置，fetch收到302响应后会自动跟随重定向，最终拿到的是登录页的完整HTML内容，既没法直接读取flash里存的错误消息，也实现不了无刷新提示的效果，在纯异步交互场景下直接返回JSON的方案比flash简单、可控得多。

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