前端开发新手必备：Vue路由守卫全攻略

前端

2023-06-24 12:32:08

Vue 路由守卫：掌控导航，提升安全性

在 Vue.js 中，路由守卫是一个强大的工具，它使你能够控制和验证路由导航。它允许你执行操作，如检查用户权限、加载数据或显示提示，在路由切换之前或之后。

路由守卫的类型

Vue 路由守卫有四种类型，每一类针对特定场景：

全局前置路由守卫： 在任何路由切换之前执行。
全局后置路由守卫： 在任何路由切换之后执行。
局部路由路径守卫： 仅在特定的路由路径上执行。
局部路由组件守卫： 仅在特定的路由组件上执行。

路由守卫的用法

全局前置路由守卫：

router.beforeEach((to, from, next) => {
  // 检查用户权限
  if (!hasPermission(to.meta.permission)) {
    // 无权限，跳转到登录页
    next('/login');
  } else {
    // 有权限，继续导航
    next();
  }
});

全局后置路由守卫：

router.afterEach((to, from) => {
  // 加载数据
  loadData(to.meta.data);
});

局部路由路径守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // 检查用户 ID 是否有效
        if (!isValidUserId(to.params.id)) {
          // 无效的用户 ID，跳转到 404 页面
          next('/404');
        } else {
          // 有效的用户 ID，继续导航
          next();
        }
      }
    }
  ]
});

局部路由组件守卫：

const User = {
  beforeRouteEnter(to, from, next) {
    // 检查用户权限
    if (!hasPermission(to.meta.permission)) {
      // 无权限，跳转到登录页
      next('/login');
    } else {
      // 有权限，继续导航
      next();
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 检查用户权限
    if (!hasPermission(to.meta.permission)) {
      // 无权限，跳转到登录页
      next('/login');
    } else {
      // 有权限，继续导航
      next();
    }
  },
  beforeRouteLeave(to, from, next) {
    // 确认是否离开当前页面
    if (confirm('是否离开当前页面？')) {
      // 离开当前页面，继续导航
      next();
    } else {
      // 不离开当前页面，取消导航
      next(false);
    }
  }
};