从零构建Vue项目中的路由鉴权

前端

2024-01-19 00:23:07

前言

随着Vue项目日益复杂，权限管理变得越来越重要。我们希望系统能够区分出不同角色的用户，并赋予他们不同的权限。在Vue项目中，通常使用路由鉴权的方式来实现用户权限控制。

1. 定义用户权限

在Vue项目中，用户权限通常与用户角色相关。我们可以为不同的用户角色定义不同的权限，例如，管理员拥有所有权限，而普通用户只拥有某些权限。

2. 管理路由

在Vue项目中，路由是控制页面访问的机制。我们可以为不同的页面定义不同的路由，并与用户权限相关联。例如，我们可以将"/admin"路由限制为管理员访问，而将"/user"路由限制为普通用户访问。

3. 检查权限

在Vue项目中，我们可以使用路由守卫来检查用户的权限。路由守卫是一个函数，它会在路由导航之前被调用。在路由守卫中，我们可以检查用户的权限，并根据用户的权限来决定是否允许用户访问该路由。

4. 控制路由导航

在Vue项目中，我们可以使用路由导航守卫来控制路由导航。路由导航守卫是一个函数，它会在路由导航之后被调用。在路由导航守卫中，我们可以根据用户的权限来决定是否允许用户访问该路由。

5. 示例代码

// 定义用户权限
const permissions = {
  admin: {
    // 管理员拥有所有权限
    '*': true,
  },
  user: {
    // 普通用户只拥有某些权限
    '/user': true,
    '/profile': true,
  },
};

// 管理路由
const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: {
      // 限制该路由仅允许管理员访问
      permission: 'admin',
    },
  },
  {
    path: '/user',
    component: User,
    meta: {
      // 限制该路由仅允许普通用户访问
      permission: 'user',
    },
  },
];

// 检查权限
const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  // 检查用户是否有访问该路由的权限
  if (to.meta.permission) {
    const permission = to.meta.permission;
    const hasPermission = permissions[permission];
    if (hasPermission) {
      // 用户拥有访问该路由的权限
      next();
    } else {
      // 用户没有访问该路由的权限
      next('/');
    }
  } else {
    // 该路由没有限制，允许所有用户访问
    next();
  }
});