Passport.js结合Vue Router导航守卫实现路由保护功能异常求助

你当前的核心错误是混淆了服务端中间件和前端路由守卫的适用场景：

• 你写的ensureAuthenticated是基于Passport.js的Node.js服务端路由中间件，仅能运行在服务端环境，接收的参数是服务端专属的req（请求对象）、res（响应对象）、next（服务端路由流转函数）。
• Vue Router的beforeEnter是运行在浏览器端的路由守卫钩子，接收的参数是to（目标路由对象）、from（来源路由对象）、next（前端路由流转函数），完全不存在服务端的req、res对象，直接复用服务端中间件必然无法生效。

方案1：前端路由守卫配合后端鉴权接口（适合前后端分离项目） #

1. 前端单独编写适配Vue Router的路由守卫：

// 前端专属路由守卫
const ensureAuthenticated = async (to, from, next) => {
  try {
    // 请求后端鉴权接口，自动携带passport存储在cookie中的会话信息
    const authRes = await fetch('/api/checkAuthStatus', {
      credentials: 'include' // 跨域场景必须加这个配置
    });
    if (authRes.ok) {
      next();
    } else {
      next('/users/login');
    }
  } catch (err) {
    next('/users/login');
  }
}

// 路由配置使用前端守卫
const routes = [
  {
    path: '/afterLogin', 
    name: 'AfterLogin', 
    component: () => import('../views/afterLogin.vue'), 
    beforeEnter : ensureAuthenticated
  }
]

2. 后端新增鉴权接口，复用你已有的服务端中间件：

// 以Express为例，其他服务端框架逻辑一致
app.get('/api/checkAuthStatus', ensureAuthenticated, (req, res) => {
  res.sendStatus(200);
});

方案2：服务端直接处理路由鉴权（适合SSR/多页应用） #

所有针对/afterLogin路径的请求先经过服务端的ensureAuthenticated中间件校验，未登录时直接由服务端返回302重定向到登录页，无需前端做额外处理。

前端路由守卫仅做页面访问的第一层拦截，所有涉及数据读写的业务接口必须在服务端做二次鉴权，避免前端校验被恶意绕过。

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