将antd design pro框架的菜单与路由从单个权限改造成支持多个权限

2024年3月27日 152次阅读 来源: zhoujunhehe

框架原生权限控制 https://pro.ant.design/docs/a…

原生权限控制

控制菜单显示#

如需对某些菜单进行权限控制，只须对菜单配置文件 menu.js 中的菜单项设置 authority 属性即可，代表该项菜单的准入权限，菜单生成文件中会默认调用 Authorized.check 进行判断处理。

{
  name: '表单页',
  icon: 'form',
  path: 'form',
  children: [{
    name: '基础表单',
    path: 'basic-form',
  }, {
    name: '分步表单',
    path: 'step-form',
  }, {
    name: '高级表单',
    authority: 'admin', // 配置准入权限
    path: 'advanced-form',
  }],
}
  1. 在登入的时候 会调用 models/login.js 里的changeLoginStatus改变登入信息，setAuthority("admin"); 改方法的具体实现是localStorage.setItem('antd-pro-authority', authority);
  2. 改变登入信息后调用reloadAuthorized()刷新权限
  3. 在component/Authorized中，会将当前的权限当做CURRENT export
  4. 同级目录下有checkPerMissions.js的check方法用来匹配当前权限和菜单权限
  5. Authorized组件的authority属性支持的string | array | Promise | (currentAuthority) => boolean,而菜单中配置的值是string,原处理函数
  if (typeof authority === 'string') {
    if (authority === currentAuthority) {
      return target;
    }
    return Exception;
  }
  1. 当setAuthority里设置的值与菜单中的authority相匹配的时候，该菜单的内容就会显示，具体实现不是这篇文章需要关心的。
  2. 但是LocalStorage 只支持string,不支持数组类型，所以权限控制起来并不灵活.因为项目需要，就将代码改造了一下。

改造过程

  1. 当前登入的权限还是存在LocalStorage中，多个权限由逗号拼接 ‘admin,user,user2’
  2. 上面第三步将分割字符串成数组
          if (currentAuthority.indexOf(",")>0){
            CURRENT = currentAuthority.split(",")
          }else{
            CURRENT = currentAuthority;
          }

3.第五步中的check函数中string处理改造

if (Array.isArray(currentAuthority)) {
      let flag = false
      currentAuthority.forEach(element => {
        if (authority===element) {
          flag = true
        }
      });
      if (flag) {
        return target;
      }
    } else if (authority === currentAuthority) {
      return target;
    }

4.在setAuthority中传入admin,user即可

    原文作者：zhoujunhehe
    原文地址: https://segmentfault.com/a/1190000013735946
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞