守卫路由通达网络世界的钥匙

前端

2024-01-14 17:50:21

守卫的分类

路由守卫根据执行时机和定义位置，大致可以分为三大类：

组件内的守卫： 这种守卫位于组件内部，仅对该组件的路由有效。可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子函数来实现。
全局守卫： 全局守卫位于根组件内，对所有路由有效。可以使用 beforeEach 和 afterEach 钩子函数来实现。
路由独享的守卫： 路由独享的守卫位于路由配置对象中，仅对该路由有效。可以使用 beforeEnter 钩子函数来实现。

2. 守卫的用途

路由守卫可以用来实现各种各样的功能，包括：

验证： 路由守卫可以用来验证用户是否已经登录，是否有权访问某个页面。
数据预取： 路由守卫可以用来在路由切换之前预取数据，这样可以提高页面的加载速度。
导航控制： 路由守卫可以用来控制用户的导航行为，比如防止用户访问某些页面。
错误处理： 路由守卫可以用来处理路由切换过程中发生的错误。

3. 守卫实例

为了更好地理解路由守卫，我们来看几个具体的例子：

1. 使用组件内的守卫来验证用户是否已经登录：

export default {
  beforeRouteEnter(to, from, next) {
    if (!this.$store.state.user.isLogin) {
      next('/login');
    } else {
      next();
    }
  }
};

2. 使用全局守卫来预取数据：

router.beforeEach((to, from, next) => {
  const data = await fetch(to.fullPath);
  this.$store.commit('setData', data);
  next();
});

3. 使用路由独享的守卫来控制用户的导航行为：

{
  path: '/admin',
  beforeEnter: (to, from, next) => {
    if (!this.$store.state.user.isAdmin) {
      next('/');
    } else {
      next();
    }
  }
}