Vue Router 怎么使用全局前置守卫拦截未登录访问-Vue.js-PHP中文网

router.beforeeach是实现登录拦截最直接可靠的位置，它在每次路由跳转前自动执行，通过白名单放行、登录态双校验、meta.requiresauth权限标记三步完成分层拦截，并支持重定向回原路径。

vue router 怎么使用全局前置守卫拦截未登录访问

用 router.beforeEach 就能实现——它在每次跳转前自动执行，是做登录拦截最直接、最可靠的位置。

核心判断逻辑：三步走

实际拦截不是“一刀切”，而是分层校验：

先看是不是免登录页：比如 /login、/register、/404 这类路由，直接放行，不检查登录态
再查有没有有效凭证：通常读取 localStorage 或 Cookie 中的 token，或结合 Vuex/Pinia 状态。注意别只依赖一个来源，建议双校验（如 token + isAuthenticated 标识）
最后看目标页是否需要权限：通过路由配置里的 meta.requiresAuth: true 标记受保护页面，避免所有页面都走校验

关键代码写法（Vue 3 + Vue Router 4）

在 src/router/index.js 或 .ts 中配置：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

router.beforeEach((to, from, next) => {
  // 1. 白名单放行
  const publicPages = ['/login', '/register', '/forgot-password'];
  if (publicPages.includes(to.path)) {
    next();
    return;
  }

  // 2. 检查登录态（示例：token 存在即视为已登录）
  const token = localStorage.getItem('token');
  if (token) {
    next(); // 已登录，放行
  } else {
    // 未登录，重定向到登录页，并带上原目标路径
    next({ path: '/login', query: { redirect: to.fullPath } });
  }
});

登录页怎么接住跳转？

用户被重定向到 /login?redirect=/admin/user 后，登录成功时要主动跳回去：

在登录组件中读取 this.$route.query.redirect（Vue 2）或 useRoute().query.redirect（Vue 3 Composition API）
登录成功后调用 router.push(redirect || '/')
注意对 redirect 做基础校验（比如是否为合法路径），防跳转劫持