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

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

一、什么是路由守卫?

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

  1. 准备进入页面时(beforeEach)
  2. 即将离开页面时(beforeRouteLeave)
  3. 路由更新时(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. 执行顺序很重要

  1. 导航被触发
  2. 调用全局的 beforeEach 守卫
  3. 在重用的组件里调用 beforeRouteUpdate
  4. 在路由配置里调用 beforeEnter
  5. 在被激活的组件里调用 beforeRouteEnter
  6. 调用全局的 beforeResolve 守卫
  7. 导航被确认
  8. 调用全局的 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

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

相关推荐
贵沫末4 分钟前
React——基础
前端·react.js·前端框架
aklry15 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9322 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子23 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982423 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug26 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo26 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan26 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js