Vue3进阶-第七篇：路由守卫详解

Vue3进阶-第七篇：路由守卫详解

1. 全局路由守卫

beforeEach 和 afterEach 的使用场景

在 Vue Router 中，beforeEach 和 afterEach 是两个重要的全局路由守卫。它们在路由导航的不同阶段触发，为开发者提供了控制路由行为和处理通用逻辑的能力。

beforeEach

beforeEach 守卫会在每次路由导航发生之前被调用。这意味着，无论用户是通过点击链接、调用 router.push 还是其他方式触发路由切换，beforeEach 都会首先执行。它的典型使用场景包括：

• 身份验证：检查用户是否已经登录。如果用户未登录，阻止其访问某些需要登录权限的页面，并将其重定向到登录页面。例如，在一个电商应用中，用户在未登录时尝试访问购物车或个人中心页面，此时可以通过 beforeEach 守卫进行拦截。
• 权限验证：除了基本的登录状态检查，还可以验证用户是否具有特定的权限。比如，只有管理员用户才能访问系统设置页面，通过 beforeEach 守卫可以验证用户角色并决定是否允许访问。
• 加载全局数据：在