路由守卫的常见案例使用方式

## **路由守卫登录权限检查路由拦截器**作用**用户访问页面时先检查有没有登录、登录有没有过期没登录就自动踢去登录页**。​ 在**跳转页面之前**先执行一段逻辑决定- 放行正常进页面- 拦截跳转到登录页 / 首页 / 404- 终止不让跳转最常用的**全局前置守卫**。必须调用 next()否则页面卡住不动## 常用案例### 案例1基础登录拦截需求带 requiresAuth: true 的页面必须登录router.beforeEach((to, from, next) { const token localStorage.getItem(access_token) // 需要登录 if (to.meta.requiresAuth) { if (!token) { return next(/login) } } // 不需要登录 或 已登录 直接放行 next() })### 案例2白名单模式登录页不用拦截需求登录页、注册页永远不需要登录其他需要router.beforeEach((to, from, next) { const token localStorage.getItem(access_token) // 白名单 const whiteList [/login, /register] if (whiteList.includes(to.path)) { return next() } // 不在白名单且没登录 → 跳登录 if (!token) { return next(/login) } next() })### 案例3已登录禁止再进登录页需求已经登录了再访问 /login 自动跳首页router.beforeEach((to, from, next) { const token localStorage.getItem(access_token) // 已登录还去登录页 → 强制跳首页 if (to.path /login token) { return next(/projects) } next() })### 案例4JWT 自动校验过期router.beforeEach((to, from, next) { const token localStorage.getItem(access_token) if (to.meta.requiresAuth) { if (!token) return next(/login) try { // 解析 jwt 过期时间 const payload JSON.parse(atob(token.split(.)[1])) // 已过期 if (payload.exp * 1000 Date.now()) { localStorage.removeItem(access_token) return next(/login) } } catch (err) { // token 格式错误 localStorage.removeItem(access_token) return next(/login) } } next() })### 案例5角色权限控制管理员才能进路由配置加元信息{ path: /admin, meta: { requiresAuth: true, role: admin } }导航守卫判断router.beforeEach((to, from, next) { const token localStorage.getItem(access_token) const userRole localStorage.getItem(role) if (to.meta.requiresAuth) { if (!token) return next(/login) // 需要管理员权限但用户不是管理员 if (to.meta.role to.meta.role ! userRole) { return next(/404) } } next() })## 配合路由 meta 用法规则在路由项里配置{ path: /projects, name: ProjectList, component: () import(/views/ProjectListView.vue), meta: { requiresAuth: true, // 是否需要登录 title: 项目列表, // 页面标题 role: admin // 所需角色 } }靠 to.meta 给路由打标记守卫统一判断