路由守卫防止非法访问，手把手搭建企业权限系统

路由守卫是前端权限控制的第一道“智能门禁”，它不替代后端鉴权，却能高效拦截未登录跳转、角色越权访问和无效菜单展示，显著提升安全感知与用户体验；本文手把手带你用 Vue Router 4 的 Composition API 实现企业级守卫逻辑，明确划清“该拦什么、不该拦什么”的职责边界，结合结构化权限码（如 article:create）、多场景状态同步（刷新/多标签页/缓存失效）及前后端协同设计，帮你避开假安全陷阱，构建真正可靠、可扩展的权限系统。

路由守卫是前端权限控制的第一道防线，它不能替代后端鉴权，但能有效拦截明显越权跳转、提升用户体验和安全性感知。关键在于：守卫只做“可见性过滤”和“轻量级准入检查”，所有核心权限逻辑必须由后端接口返回并校验。

明确守卫职责边界：什么该拦，什么不该拦

路由守卫适合处理以下场景：

• 未登录用户访问需认证页面（如 /dashboard）→ 重定向到登录页
• 已登录但角色无权访问某路由（如普通员工打开 /admin/users）→ 显示 403 或跳转首页
• 动态菜单渲染前，过滤掉用户无权限的菜单项（配合路由元信息 meta.roles）

它不适合处理：

• 敏感数据接口调用权限（必须由后端返回 403/401）
• 表单字段级或按钮级细粒度控制（应结合权限码 + 组件内判断）
• 绕过浏览器地址栏直接输入 URL 的“假安全”幻想（守卫可被禁用，仅防误点）

Vue Router 路由守卫实战写法（v4 Composition API）

在 router/index.ts 中配置全局前置守卫：

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()
  const token = userStore.token

  // 1. 无需登录即可访问的页面（登录页、404、公开文档）
  if (to.meta.public) {
    next()
    return
  }

  // 2. 无 token → 强制跳转登录页，并记录目标路径用于登录后回跳
  if (!token) {
    next({ path: '/login', query: { redirect: to.fullPath } })
    return
  }

  // 3. 已有 token，但用户信息未拉取 → 先获取用户基础信息和权限列表
  if (!userStore.userInfo?.roles?.length) {
    try {
      await userStore.fetchUserInfo() // 调用接口拿到 roles、permissions 等
    } catch (err) {
      userStore.logout()
      next({ path: '/login', query: { redirect: to.fullPath } })
      return
    }
  }

  // 4. 检查当前路由是否在用户权限范围内
  const requiredRoles = to.meta.roles || []
  const hasRole = requiredRoles.some(role => userStore.userInfo.roles.includes(role))
  
  if (hasRole) {
    next()
  } else {
    next({ path: '/403' }) // 或 next(false) 中断导航
  }
})

配合后端设计：权限标识要结构化、可扩展

别用模糊的字符串如 "admin" 做判断。推荐后端返回标准化权限结构：

{
  "userId": "u_123",
  "roles": ["editor", "reviewer"],
  "permissions": [
    "article:list",
    "article:create",
    "user:read",
    "setting:notify:update"
  ]
}

前端据此做两层控制：

• 路由级：用 roles 控制整页可见性（如 /admin 对应 roles: ["admin"]）
• 组件级：用 permissions 控制按钮/操作（如 v-if="hasPermission('article:create')"）

权限码采用「资源:动作」格式，便于未来按模块批量授权（如后端支持按前缀回收 "article:*"）。

避免常见坑：缓存、刷新、多标签页场景

用户刷新页面时，store 会清空，但 token 可能还在 localStorage。此时需：

• 在 App.vue 的 onMounted 中触发一次用户信息拉取（不依赖守卫），确保状态同步
• 将权限数据存在 pinia/persistedstate 中，配合 token 有效期做自动失效（如 token 过期则清除 store）
• 监听 visibilitychange 事件，在用户切回页面时校验 token 是否仍有效
• 多标签页间 token 变更需广播通知（可用 localStorage event 或 BroadcastChannel）

守卫本身不处理这些，但整个权限流必须覆盖它们，否则会出现“刷新后白屏”或“权限未及时更新”问题。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~