基於Ant Design Pro2 的權限管理實踐

前言

在中後臺管理項目中，權限是重要的基礎功能。在項目架構初期，就要作好全面的設計。 傳統的基於url控制的後端權限，在前端spa應用的前提下，已經再也不合適。服務端並不能獲取到前端的路由跳轉。權限這快，前端的邏輯將會更重。基於Ant Design Pro2 ，umi2 的技術棧前提下，antd已經提供的一套相對完善的權限方案。

目標

權限的維度咱們但願控制到按鈕層，包括菜單，包括路由。

antd方案

antd的方案基於角色維度來進行。config設定當前路由的准入角色。權限組建接受當前角色信息，如此判斷渲染的內容。

如需對某些頁面進行權限控制，只須在路由配置文件 router.config.js 中設置 authority 屬性便可，表明該路由的准入權限，pro 的路由系統中會默認包裹 Authorized 進行判斷處理。

缺陷：umi2中基於約定路由的形式。在路由初始化時不能動態配置config。及不能動態修改authority字段。並且基於角色的權限不能知足咱們的需求。咱們但願精確到用戶的權限配置。後端下發菜單，路由以及按鈕list。

實現

爲解決該問題。咱們在router.config.js新增code字段。標記路由的惟一code。Routes定義路由層的父級組件。在該組件中進行路由攔截，實現路由級別權限控制。 // config.js

[
  { path: '/', component: './pages/index.js' },
  { path: '/list', component: './pages/list.js',code:123, Routes: ['./routes/PrivateRoute.js'] },
]
複製代碼

// PrivateRoute.js

if (route.code && menuList && menuList.indexOf(route.code) == -1) {
    router.replace('/exception/403');
  }
複製代碼

菜單權限

基於pro的菜單方案進行了修改。直接動刀BasicLayout.js,修改原先基於authority字段的菜單邏輯。改至code字段。

新增路由管理

路由表由前端提供，路由名稱，（包括路由，菜單，以及按鈕類型）。後端存至服務端。再有對應的token下發對應的code list。

按鈕

寫個高階組件封裝下button。 over