Vue 路由拦截的多种实现方式

在 Vue 开发中，路由拦截是一项极为重要的功能，它能够帮助我们在用户访问特定路由之前进行一些验证或处理操作，从而提升应用的安全性与用户体验。下面将介绍几种常见的 Vue 路由拦截实现方式。

全局路由守卫

全局路由守卫是应用级别的路由拦截，通过 router.beforeEach 方法进行设置。例如：

const router = createRouter({
  // 路由配置
})
router.beforeEach((to, from, next) => {
  // to 是即将进入的目标路由对象
  // from 是当前导航正要离开的路由
  // next 函数用于控制导航的流程
  if (to.meta.requiresAuth) {
    const isAuthenticated = checkAuth(); // 自定义的验证函数
    if (isAuthenticated) {
      next();
    } else {
      next('/login'); // 跳转到登录页面
    }
  } else {
    next();
  }
});

全局路由守卫适用于需要对所有路由进行统一验证的场景，如验证用户是否登录。

路由独享守卫

每个路由配置对象都可以定义自己的 beforeEnter 守卫。比如：

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      const isAdmin = checkAdmin(); // 自定义验证是否为管理员的函数
      if (isAdmin) {
        next();
      } else {
        next('/');
      }
    }
  }
];

这种方式为特定路由提供了独立的拦截逻辑，更加灵活，适用于某些特定路由需要特殊验证的情况。

组件内路由守卫

在组件内部也可以定义路由守卫，例如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。以 beforeRouteEnter 为例：

export default {
  name: 'MyComponent',
  beforeRouteEnter(to, from, next) {
    const hasPermission = checkPermission(); // 自定义权限验证函数
    if (hasPermission) {
      next();
    } else {
      next('/no-permission');
    }
  }
};

组件内路由守卫主要用于在组件级别对路由进行控制，方便在组件相关的业务逻辑中进行拦截处理。

Vue 提供的多种路由拦截方式，让开发者能够根据不同的业务需求，灵活地控制用户对路由的访问，确保应用的正常运行与数据安全。