谁说前端权限管理不重要？addRoutes 的坑你知道吗？

2024-01-10 08:21:07

前端权限管理：一个不容忽视的难题

路由依赖：前端权限管理中的隐藏陷阱

在前端权限管理中，一个常见的场景是为具有多个角色的用户动态加载路由，以实现不同角色访问不同页面和功能的需求。然而，这种方式存在一个潜在的陷阱：路由依赖。

当路由之间存在依赖关系时，如果不考虑这一关系，就会出现页面无法正常显示、功能无法正常使用等问题。例如，如果普通用户试图访问一个需要管理员权限的页面，该页面将无法正常显示。同样，如果普通用户在管理员页面中嵌套了一个普通用户页面，嵌套的页面也将无法正常显示。

避免依赖问题：两种可行方法

为了避免路由依赖问题，有两种可行的方法：

同时加载依赖路由： 在加载某个角色的路由时，同时加载该角色所有依赖的路由。这种方法简单易行，但会增加前端代码的复杂性。
检查并加载依赖路由： 在路由加载完成后，检查是否存在依赖关系，如果存在，则加载依赖的路由。这种方法相对灵活，但如果角色权限经常变动，将增加后端生成路由的工作量。

路由依赖处理：代码示例

使用 Vue Router 来处理路由依赖，可以使用以下代码示例：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: {
        requiresAuth: true,
        role: 'admin'
      }
    },
    {
      path: '/user',
      component: UserComponent,
      meta: {
        requiresAuth: true,
        role: 'user'
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const currentUser = store.state.currentUser;
    if (!currentUser) {
      next('/login');
    } else if (to.meta.role && currentUser.role !== to.meta.role) {
      next('/unauthorized');
    } else {
      next();
    }
  } else {
    next();
  }
});