Keycloak+React+Umi+Antd 设置权限 显示动态路由 及 页面按钮权限

需求：
可配置一级模块，二级页面，页面button权限
权限控制，颗粒度到页面的按钮权限
大致如下：

程序框架：
登录是使用的 keyclock
前端项目使用的是的 react+umi+antd

思路

1. 录入所有页面及button在keyclock后台中：
   集成的keyclock有对应的后台管理页面 所有的一级模块，二级页面，button都要记录在后台里 页面级别储存在resource中
   button储存在Permissions 中

2. 登录后返回当前账号所对应的资源及权限

3. button权限：拿到所有button资源后储存到model或者缓存里，对每一个button都绑定是否有权限的判断

4. 页面权限：拿到有权限的页面后，与当前所有route的name进行比对筛选，生成新的路由
   （我这里的存储在keyclock的页面名称 和 路由的name是一致的）

   筛选的详细见之前整理的文章：https://blog.csdn.net/qq_40593656/article/details/108580563
   更多keyclock的权限配置，角色配置等，可在官网查询：
   https://www.keycloak.org/docs/latest/server_admin/index.html#overview

Code

1. 按钮的权限控制：

   1>把拿到的所有按钮权限存在缓存里

   2>写公用方法，每个button用这个方法进行判断

   公用方法：

   export const hasButtonAuth = (buttonName) => {
          
     const allButtonAuth = JSON.parse(localStorage.getItem('buttonReq'));
     if (allButtonAuth) {
          
       const index = allButtonAuth.indexOf(buttonName);
       if (index > -1) {
          
         return true;
       }
       return false;
     }
     return false;
   };
   

   页面使用：
   

2. 页面路由的配置

   详细见之前整理的文章：https://blog.csdn.net/qq_40593656/article/details/108580563

3. keyclock配置

   页面配置：（所以无需配置一级菜单，可根据二级菜单的信息生成）
   一般就直接只配置二级菜单
   
   按钮配置：