Vue Router的导航守卫有哪些实际应用场景？请描述至少两种情况下的使用。

Vue Router的导航守卫在实际项目中有着广泛的应用场景，以下描述两种常见的情况及其使用：

文末有我帮助400多位同学成功领取到前端offer的面试综合题哦，包含了工程化，场景题，八股文，简历模板，等等

1. 登录验证与权限控制

使用场景：

• 当用户试图访问某些需要登录或特定权限的页面时，导航守卫可以用来验证用户是否已经登录或具备相应的权限。

具体实现：

• 全局前置守卫（router.beforeEach）：在路由切换之前进行全局的权限和登录验证。
  • 检查用户是否已登录：如果用户未登录且试图访问非登录页面，则导航到登录页面。
  • 权限检查：当用户尝试访问需要特定权限的页面时，检查用户是否拥有该权限，并据此决定是否允许访问或重定向到其他页面。

示例代码：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('userToken') // 假设这里是从localStorage获取用户登录状态
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth) // 检查目标路由是否需要