Vue.js 中路由权限控制的两种方式

2023-10-09 17:38:11

在 Vue.js 应用中，控制用户对不同路由或页面的访问权限至关重要，以确保数据安全和用户体验。本文将探讨两种常见的 Vue.js 路由权限控制方法，包括：

路由元信息（meta）
路由守卫（Guard）

路由元信息（meta）

路由元信息是一种灵活的方法，它允许为每个路由定义一个元对象，该对象包含有关路由的额外信息，包括权限控制设置。以下是使用路由元信息实现权限控制的步骤：

在路由表中定义元对象： 在定义路由时，可以为每个路由添加一个 meta 属性，其中包含权限设置，例如：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, role: 'admin' }
  },
  {
    path: '/user',
    component: User,
    meta: { requiresAuth: true, role: 'user' }
  },
  {
    path: '/login',
    component: Login
  }
];

在导航守卫中检查权限： 在 beforeEach 导航守卫中，可以检查当前路由的元数据并根据用户的权限采取相应操作：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (isLoggedIn()) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

路由守卫（Guard）

路由守卫提供了更细粒度的权限控制，因为它允许在导航到或离开路由时执行自定义代码。以下是使用路由守卫实现权限控制的步骤：

定义路由守卫： 在 Vue.js 路由实例中，可以使用 beforeEach 和 beforeResolve 守卫来检查权限，例如：

router.beforeEach((to, from, next) => {
  // 检查权限
  if (!hasPermission(to)) {
    // 导航到未授权页面
    next('/unauthorized');
  } else {
    next();
  }
});