使用 Vue 路由实现细粒度的权限控制

2024-01-31 10:51:05

导言

在现代 Web 应用程序中，权限控制是一个至关重要的安全功能。它确保只有获得授权的用户才能访问特定的页面、功能或数据。在 Vue 路由中，我们可以通过多种方式实现权限控制，其中最常见的方法是使用路由元信息 (meta) 和动态加载菜单和路由 (async & lazy)。本文将详细介绍这两种方法，并提供代码示例和最佳实践。

路由元信息 (meta)

路由元信息 (meta) 是一个 Vue 路由提供的特性，允许我们在路由配置中添加自定义数据。我们可以利用这个特性来存储有关路由的权限信息，例如，哪些角色可以访问该路由。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      roles: ['admin', 'manager']
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      roles: ['user']
    }
  }
];

在上面的示例中，我们为 '/dashboard' 路由设置了 roles 元信息，值为 ['admin', 'manager']。这意味着只有 admin 和 manager 角色的用户才能访问该路由。

我们可以使用 beforeEach 路由守卫来检查路由的 meta 信息，并根据用户的角色来决定是否允许他们访问该路由。

router.beforeEach((to, from, next) => {
  const roles = to.meta.roles;
  const user = JSON.parse(localStorage.getItem('user'));

  if (roles && !roles.includes(user.role)) {
    next('/');
  } else {
    next();
  }
});

在上面的示例中，我们首先从 localStorage 中获取用户的角色信息，然后检查当前路由的 meta.roles 是否包含用户的角色。如果包含，则允许用户访问该路由，否则，将用户重定向到首页。

动态加载菜单和路由 (async & lazy)

另一种实现权限控制的方法是使用动态加载菜单和路由 (async & lazy)。我们可以使用 async 和 lazy 组件来动态加载菜单和路由，并在组件加载之前检查用户的权限。

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: {
      roles: ['admin', 'manager']
    }
  },
  {
    path: '/profile',
    component: () => import('@/views/Profile.vue'),
    meta: {
      roles: ['user']
    }
  }
];

在上面的示例中，我们使用了 () => import('@/views/Dashboard.vue') 来动态加载 Dashboard 组件。这样，只有在用户访问该路由时，才会加载该组件。

我们可以使用 beforeEach 路由守卫来检查组件的 meta 信息，并根据用户的角色来决定是否允许他们访问该组件。

router.beforeEach((to, from, next) => {
  const roles = to.meta.roles;
  const user = JSON.parse(localStorage.getItem('user'));

  if (roles && !roles.includes(user.role)) {
    next('/');
  } else {
    next();
  }
});