Vue Router全局拦截

Vue Router全局拦截全攻略

一、为什么需要全局拦截？

最近在开发后台管理系统时，突然发现所有页面都需要登录才能访问。如果每个页面都手动检查登录状态，那代码简直要写成意大利面条了。这时候，Vue Router的全局拦截功能就像个贴心小助手，帮我们统一处理这些逻辑。

二、认识导航守卫

Vue Router提供了完整的导航解析流程，就像地铁安检一样，每个乘客（路由）都要经过几个检查点：

1. 全局前置守卫（beforeEach）：进站前的安检
2. 路由独享守卫（beforeEnter）：特殊通道检查
3. 组件内守卫（beforeRouteEnter）：车厢内抽查

今天咱们重点聊聊这个最常用的beforeEach。

三、基础拦截示例

先来个最简单的登录拦截：

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {// 如果需要认证且未登录，跳转到登录页next(/login)} else {// 放行next()}
})

这里有几个关键点：

• to：目标路由对象
• from：当前路由对象
• next：必须调用的函数，就像安检员的小旗子

四、实战进阶技巧

1. 权限控制

后台管理系统通常需要根据用户角色显示不同菜单：

router.beforeEach((to, from, next) => {const userRole = getUserRole()const requiredRole = to.meta.roleif (requiredRole && userRole !== requiredRole) {next(/403) // 无权限页面} else {next()}
})

2. 页面访问统计

router.beforeEach((to, from, next) => {trackPageView(to.path) // 发送统计next()
})

3. 动态修改页面标题

router.beforeEach((to, from, next) => {document.title = to.meta.title || 默认标题next()
})

五、常见坑点指南

1. 忘记调用next()：会导致页面卡住，就像把乘客堵在安检口
2. 无限重定向：

   // 错误示范！
   next(/login)
   // 在login页又跳转回首页
   

3. 异步操作处理：

   router.beforeEach(async (to, from, next) => {await checkAuth()next()
   })
   

六、完整项目示例

假设我们有个电商项目，需要：

• 未登录跳转登录页
• 已登录但未完善信息跳转资料页
• 管理员才能访问后台

router.beforeEach(async (to, from, next) => {const isLogin = await checkLogin()const userInfo = await getUserInfo()if (to.meta.requiresAuth && !isLogin) {next({ path: /login, query: { redirect: to.fullPath } })} else if (isLogin && !userInfo.completedProfile && to.path !== /profile) {next(/profile)}else if (to.meta.adminOnly && !userInfo.isAdmin) {next(/403)}else {next()}
})

七、总结

Vue Router的全局拦截就像交通管制系统，合理使用可以让我们的应用：

• 更安全（权限控制）
• 更智能（动态路由）
• 更可维护（统一处理）

记住几个要点：

1. 一定要调用next()
2. 处理好异步情况
3. 避免循环跳转

现在，快去给你的路由加上守卫吧！