將antd design pro框架的菜單與路由從單個權限改形成支持多個權限

框架原生權限控制 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便可