路由守卫是前端权限控制第一道防线，仅做可见性过滤和轻量准入检查，核心权限必须由后端接口返回并校验；适合拦截未登录访问、角色无权路由及动态菜单过滤，不适用于接口权限、字段级控制或绕过地址栏的假安全。
路由守卫是前端权限控制的第一道防线，它不能替代后端鉴权，但能有效拦截明显越权跳转、提升用户体验和安全性感知。关键在于：守卫只做“可见性过滤”和“轻量级准入检查”，所有核心权限逻辑必须由后端接口返回并校验。
明确守卫职责边界：什么该拦，什么不该拦
路由守卫适合处理以下场景：
- 未登录用户访问需认证页面（如 /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）
守卫本身不处理这些，但整个权限流必须覆盖它们，否则会出现“刷新后白屏”或“权限未及时更新”问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
