passport认证成功后res.render返回ejs页面但网页未更新如何解决

问题根因 #

你使用XMLHttpRequest（AJAX）发送登录请求时，服务端返回的重定向响应、渲染完成的页面内容都会被AJAX对象接收，浏览器不会自动执行跳转、页面内容替换操作，因此你能在网络请求中看到响应内容，但页面没有任何变化。

修复步骤 #

1. 调整前端请求逻辑 #

在AJAX请求的成功回调中添加页面跳转/内容替换逻辑，示例代码如下：

document.querySelector('button').addEventListener('click', () => {
  const userCred = {}
  const username = document.getElementById('username').value
  const password = document.getElementById('password').value
  userCred.username = username
  userCred.password = password

  const xhr = new XMLHttpRequest()
  // 建议把username放到请求body里，不要放在路径参数中更安全
  xhr.open('POST', `http://localhost:3000/users/login`)
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(userCred))

  xhr.onload = function () {
    if (!(xhr.status === 200)) {
      alert('登录失败')
      return
    }
    // 方案1：直接跳转至用户dashboard页，逻辑最简单
    window.location.href = `/users/${username}`
    // 方案2：如果需要复用服务端返回的渲染内容，直接替换当前页面
    // document.write(xhr.responseText)
  }
})

2. 修复服务端配置漏洞 #

你当前的passport配置缺少session支持，会导致登录状态无法持久化，后续访问dashboard页面仍然会被判定为未登录：

• 先安装express-session依赖：npm install express-session
• 修改app.js添加session配置：

const session = require('express-session')
app.use(cors())
app.use(express.urlencoded({extended: true})); 
app.use(express.json());  

// 新增session配置
app.use(session({
  secret: '自定义任意字符串作为加密密钥',
  resave: false,
  saveUninitialized: false
}))
app.use(passport.initialize());
// 新增passport session中间件
app.use(passport.session())

// 其余原有配置保持不变
app.set('view engine', 'ejs');
// ... 剩余代码

3. 优化路由逻辑 #

• 路由中执行完res.render、res.redirect等响应方法后不需要再调用next()，避免触发不必要的后续中间件逻辑，直接删除这些路由里的next()调用即可
• 登录路由可以适配AJAX场景，去掉重定向直接返回JSON响应，更适合前后端分离交互：

userRouter.post('/login', passport.authenticate('local' , { failureRedirect: '/'}), (req, res) => {
  res.json({
    success: true,
    username: req.user.username
  })
})

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