Vue路由守卫全攻略：给页面访问装上'安检门'

大家好，我是小杨，一个在前端界摸爬滚打6年的"安检员"。今天要和大家聊聊Vue路由守卫这个超级实用的功能，它能像机场安检一样控制每个页面的进出权限。学会了这个，你的网站安全性直接提升好几个Level！

一、什么是路由守卫？

简单来说，路由守卫就是路由跳转过程中的"关卡检查"。就像我去银行取钱，得先过保安登记一样，路由守卫会在这些关键节点进行拦截：

准备进入页面时（beforeEach）
即将离开页面时（beforeRouteLeave）
路由更新时（beforeRouteUpdate）

二、全局守卫：最常用的"安检门"

1. 基础版登录拦截

javascript 复制代码

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !我.isLogin) {
    next('/login?redirect=' + to.fullPath) // 记录想去的页面
  } else {
    next() // 放行
  }
})

我的实战技巧：

to：即将进入的路由对象
from：当前导航正要离开的路由
next：必须调用这个方法才能继续

2. 高级权限控制

javascript 复制代码

router.beforeEach(async (to, from, next) => {
  // 动态获取用户权限
  const userRoles = await store.dispatch('getUserRoles')
  
  if (to.meta.roles && !to.meta.roles.includes(userRoles)) {
    next('/403') // 无权限页面
  } else {
    next()
  }
})

三、路由独享守卫：VIP专属通道

有时候某些特殊路由需要特别关照：

javascript 复制代码

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    if (!我.isAdmin) {
      next('/unauthorized')
    } else {
      next()
    }
  }
}

适用场景：

付费内容页面
后台管理系统
敏感数据页面

四、组件内守卫：精细化管理

1. 离开页面时的确认

javascript 复制代码

beforeRouteLeave (to, from, next) {
  if (this.isFormDirty) {
    const answer = confirm('有未保存的修改，确定离开吗？')
    answer ? next() : next(false)
  } else {
    next()
  }
}

2. 路由参数变化时的处理

javascript 复制代码

beforeRouteUpdate (to, from, next) {
  this.userId = to.params.userId
  this.loadUserData()
  next()
}

五、小杨的守卫配置秘籍

1. 执行顺序很重要

导航被触发
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdate
在路由配置里调用 beforeEnter
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫
导航被确认
调用全局的 afterEach 钩子

2. 常见问题解决方案

问题1：next()被多次调用

javascript 复制代码

// 错误示范
if (condition) {
  next('/login')
}
next() // 会被再次调用

// 正确做法
if (condition) {
  return next('/login') // 直接return
}
next()

问题2：异步操作处理

javascript 复制代码

router.beforeEach(async (to, from, next) => {
  await store.dispatch('initUserInfo')
  next()
})

六、实战案例：完整的权限控制系统

javascript 复制代码

// 路由配置
{
  path: '/dashboard',
  component: Dashboard,
  meta: {
    requiresAuth: true,
    permissions: ['view_dashboard']
  }
}

// 全局守卫
router.beforeEach(async (to, from, next) => {
  // 1. 验证登录状态
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isAuthenticated) {
      return next('/login')
    }
  }
  
  // 2. 验证权限
  const requiredPermissions = to.meta.permissions
  if (requiredPermissions) {
    const hasPermission = await store.dispatch('checkPermission', requiredPermissions)
    if (!hasPermission) return next('/403')
  }
  
  next()
})

今天的路由守卫教程就到这里啦！现在你的网站应该比五角大楼还安全了（开玩笑的）。如果觉得有用，别忘了点赞收藏，有什么问题欢迎在评论区交流～我看到都会回复的！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！