ant design pro （十六）advanced 權限管理

一、概述

原文地址：https://pro.ant.design/docs/authority-management-cn

權限控制是中后台系統中常見的需求之一，你可以利用我們提供的權限控制組件，實現一些基本的權限控制功能，腳手架中也包含了幾個簡單示例以提供參考。

二、詳細

2.1、權限組件 Authorized

這是腳手架權限管理的基礎，基本思路是通過比對當前權限與准入權限，決定展示正常渲染內容還是異常內容，使用方式詳見 Authorized 文檔。

2.2、應用實例

通過對數據的組織及權限組件的應用，腳手架實現了基本的權限管理，下面簡單介紹了幾個常見場景的應用方式。

腳手架中對組件 export 的 RenderAuthorized 函數進行了基本封裝，默認傳入當前的權限(mock 數據)，因此在腳手架中使用時，無需再關注當前權限。

2.2.1、控制菜單顯示

如需對某些菜單進行權限控制，只須對菜單配置文件 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',
  }],
}

2.2.2、控制路由導向

與菜單控制類似，路由權限的配置也很簡單：

// src/common/router.js
'/dashboard/analysis': {
  component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
},
'/dashboard/monitor': {
  component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),
},
'/dashboard/workplace': {
  component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
  authority: 'admin', // 配置准入權限
},

注意：菜單中配置的權限會自動同步到對應路由中，如果 router.js 中有不同的配置，路由控制以 router.js 為准。

2.2.3、控制頁面元素顯示

使用 Authorized 或 Authorized.Secured 可以很方便地控制元素/組件的渲染，具體使用方式參見組件文檔。

2.2.4、修改當前權限

腳手架中使用 localstorage 模擬權限角色，實際項目中可能需要從后台讀取。
腳手架中實現了一個簡單的刷新權限方法，在登錄/注銷等關鍵節點對當前權限進行了更新。
具體可以查看login.js中對 reloadAuthorized 的調用。