什么是路由守卫？

当我们构建Web应用程序时，路由守卫是一个非常重要的概念。它允许我们在路由导航过程中添加额外的逻辑，以实现一些特定的行为。在Vue.js中，我们可以使用路由守卫来控制页面的访问权限、处理用户身份验证和执行其他的前置或后置操作。在本篇博客中，我们将详细介绍路由守卫、前置路由和后置路由。

什么是路由守卫？

路由守卫是Vue.js中的一种机制，用于在路由导航过程中拦截并执行一些操作。它允许我们在路由切换之前或之后进行某些处理，比如验证用户身份、检查权限、重定向或日志记录等。Vue.js提供了多个路由守卫钩子函数，我们可以在这些钩子函数中编写自定义逻辑。

前置路由

前置路由，也称为全局前置守卫，是在路由切换之前被调用的守卫。它允许我们在进入路由之前进行一些检查或准备工作。在Vue.js中，我们可以使用router.beforeEach()方法来注册前置路由守卫。

下面是一个示例，展示了如何在全局前置守卫中执行身份验证的检查：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuthentication(); // 检查用户是否已经登录

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 如果路由需要身份验证且用户未登录，则重定向到登录页面
    next('/login');
  } else {
    // 允许进入路由
    next();
  }
});

在上面的例子中，我们使用to参数获取目标路由对象，然后检查该路由是否需要身份验证（可以在路由配置中设置meta字段）。如果需要身份验证且用户未登录，则通过next(‘/login’)重定向到登录页面；否则，我们调用next()函数来允许进入路由。

后置路由

后置路由，也称为全局后置守卫，是在路由切换之后被调用的守卫。它允许我们在离开路由后执行一些操作，比如数据清理或日志记录。在Vue.js中，我们可以使用router.afterEach()方法来注册后置路由守卫。

下面是一个示例，展示了如何在全局后置守卫中记录每次路由切换：

router.afterEach((to, from) => {
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

在上面的例子中，我们使用to和from参数分别获取目标路由和来源路由对象，然后记录它们的路径信息。

路由守卫的使用场景

路由守卫可以应用于许多场景，以下是一些常见的使用场景：

• 身份验证：在进入某些页面之前，检查用户是否已经登录，如果没有登录，则重定向到登录页面。
• 权限控制：根据用户的角色或权限，控制用户是否可以访问某些受保护的页面。
• 数据预取：在进入页面之前，获取页面所需的数据，以便在渲染页面时可以立即使用。
• 页面切换动画：在路由切换之前或之后，执行一些动画效果，以提升用户体验。

通俗一点

当我们使用浏览器访问网页时，可以将路由守卫比作是网站的“门卫”。它会在你进入或离开某个页面的时候进行检查和操作。如果我们想要进入一个页面，它会先检查你是否有权限进入，比如是否登录了账号。如果你没有登录，它会把你重定向到登录页面。如果你已经登录了，它会允许你进入页面。同样地，当你离开一个页面时，它也可以执行一些操作。比如，它可以记录你刚刚离开哪个页面，或者清理一些数据。这样做有很多应用场景。比如，在进入某些需要登录的页面之前，它可以检查你是否登录了账号，如果没有就跳转到登录页面。或者，当你离开一个页面时，它可以记录下你的离开动作，或者清理一些不再需要的数据。通过使用路由守卫，我们可以更好地控制和管理我们的网页的行为，提升用户体验。

[x] 打卡5.17