路由守卫的常见案例使用方式
## **路由守卫（登录权限检查=路由拦截器）**
作用：**用户访问页面时，先检查有没有登录、登录有没有过期，没登录就自动踢去登录页**。
在**跳转页面之前**，先执行一段逻辑，决定：
- 放行：正常进页面
- 拦截：跳转到登录页 / 首页 / 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() })### 案例4：JWT 自动校验过期```
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` 给路由打标记，守卫统一判断