---
order: 24
title: 權限管理
type: 進階
---
權限控制是中后臺系統中常見的需求之一，你可以利用我們提供的權限控制組件，實現一些基本的權限控制功能，腳手架中也包含了幾個簡單示例以提供參考。
## 應用實例
通過對數據的組織及權限組件的應用，腳手架實現了基本的權限管理，下面簡單介紹了幾個常見場景的應用方式。
> 腳手架中對組件 export 的 RenderAuthorized 函數進行了[基本封裝](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/src/utils/Authorized.ts)，默認傳入當前的權限（mock 數據），因此在腳手架中使用時，無需再關注當前權限。
### 控制菜單和路由顯示
如需對某些頁面進行權限控制，只須在路由配置文件 [config.ts](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/config/config.ts) 中設置 `Routes` 屬性即可，代表該路由的準入權限，pro 的路由系統中會默認包裹 `Authorized` 進行判斷處理。
```js
{
path: '/',
component: '../layouts/BasicLayout',
Routes: ['src/pages/Authorized'],
authority: ['admin', 'user'],
routes: [
// forms
{
path: '/form',
icon: 'form',
name: 'form',
routes: [
{
path: '/form/basic-form',
name: 'basicform',
component: './Forms/BasicForm',
},
{
path: '/form/advanced-form',
name: 'advancedform',
authority: ['admin'],//配置準入權限,可以配置多個角色
component: './Forms/AdvancedForm',
},
],
},
],
}
```
### 修改當前權限
腳手架中使用 `localStorage` 模擬權限角色，實際項目中可能需要從后臺讀取。
腳手架中實現了一個簡單的刷新權限方法，在登錄/注銷等關鍵節點對當前權限進行了更新。
具體可以查看 `Authorized.ts` 中 [reloadAuthorized](https://github.com/ant-design/ant-design-pro/blob/33f562974d1c72e077652223bd816a57933fe242/src/utils/Authorized.ts) 的定義。
### 如何控制頁面訪問權限（用戶角色）
這里的獲取方式有幾種，像 pro 現在這樣從 config 中傳值，也可以通過 http 請求從服務端獲取，甚至本地的 json 文件加載也可以。routerData 是一個 json 數組。獲取之后只需返回類似格式的 json 即可。
```js
router: {
routes: [
// dashboard
{
path: '/dashboard',
authority: ['admin'],
routes: [
{
path: '/dashboard/analysis',
authority: ['admin', 'user'],
},
],
},
];
}
```
> 注意 router 和 menuData 可以使用同一個數據，也可以使用不同的數據，注意他們的必要屬性即可。
