基于vue3的权限控制实现

目录

• 服务端返回两个数据
•  动态加载菜单
• 注册路由

 

---

需求：不同角色的用户显示不同的菜单，且对页面的按钮也有是否对角色开发的权限

回到顶部

服务端返回两个数据

一个是菜单的权限列表，另外一个是拥有的按钮列表数据，如下：

回到顶部

 动态加载菜单

/**
    routerInfo: 动态路由
    hasRoutePermission: 用户拥有的路由权限
 */
const filterDeepDynamic = (routerInfo, hasRoutePermission) => {
  return routerInfo.filter((item) => {
    if (hasRoutePermission.includes(item.name)) {
      if (item.children && item.children.length > 0) {
        item.children = filterDeepDynamic(item.children, hasRoutePermission);
      }
      return true;
    }
  });
};

回到顶部

注册路由

 注意：这个动态路由要深拷贝