大家好,我是小杨,一个在前端界摸爬滚打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
最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!