Angular項目中怎么實現權限控制？下面本篇文章通過代碼實例來聊聊 Angular 項目實現權限控制的方法，希望對大家有所幫助！
上一篇文章我們講到了 Angular 組件通信。本文我們講講，在項目開發中，你是否會遇到這樣的需求：請根據用戶登陸，限制其訪問的內容。
So，這就是要進行權限控制。
對用戶的權限限制，我們一般會有下面的處理方式：
對用戶登陸的菜單做控制
對用戶的行為做限制
我們結合 Angular 來講解下這個話題。
菜單路由控制
系統開發的時候，會有很多的菜單，這個時候，就需要后端判斷用戶的角色，按照用戶的權限返回不同的菜單路由。
返回的數據格式需要我們按照自己在 app-routing.module.ts 中編寫好的路由路徑對應。
比如，我們有路由文件如下：
// app-routing.module.ts
const routes: Routes = [
{
path: 'user-manage',
component: AuthLayoutComponent, // 通過鑒權的組件
children: [
{
path: '',
redirectTo: 'user',
pathMatch: 'full'
},
{
path: 'user', // 用戶列表
component: UserComponent
},
{
path: 'user/detail/:uuid', // 用戶詳情，類似這種不會出現在菜單里面
component: UserDetailComponent
},
{
path: 'department', // 部門列表
component: DepartmentComponent
}
]
},
// ...
]在頁面中，我們的菜單展示的數據是這樣子的：
<!-- demo.component.html -->
<ul nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed">
<li *ngFor="let submenu of menu_data" nz-submenu [nzTitle]="isCollapsed ? '' : submenu.title" [nzIcon]="submenu.icon"
[nzOpen]="submenu.is_open" (nzOpenChange)="selectMenu(submenu)">
<ul>
<li *ngFor="let child of submenu?.children" nz-menu-item nzMatchRouter>
<a [routerLink]="['/' + child.url]">{{ child.title }}</a>
</li>
</ul>
</li>
</ul>定義了一個二級的菜單，擁有下面幾個字段：
title字段 - 菜單的標題
url字段 - 菜單的路由，對應app-routing.module.ts中的完整的path
icon字段 - 標題前的小圖標，二級標題沒有
is_open字段 - 菜單是否展開的標識
此時，后端的菜單接口，應該返回類似下面的數據：
// demo.component.ts
public menu_data:any = [
{
title: "成員管理",
url: "user-manage",
icon: "user-switch", // 這里是用了 angular ant design 的圖標
is_open: false,
children: [
{
title: "用戶",
url: "user-manage/user",
icon: undefined,
is_open: false
},
{
title: "部門",
url: "user-manage/department",
icon: undefined,
is_open: false
}
]
},
// ...
]也許你會有疑問??：二級標題中都用不上 icon 和 is_open 這兩個字段，為啥還要寫？
嗯～，讀者可以對后端返回提要求，但是為了保持數據的可讀性和易操作，還是保留為好...
用戶行為控制
用戶的行為控制，這個的就很細粒度的行為了。小到控制用戶的一個按鈕的展示等，但是本質來說，都是對后端接口請求的限制?。比如，你請求一個列表，但是你沒有權限，那么你就請求不了，報 401 的錯誤。
我們可以按照需求，針對用戶的不同角色，限定用戶不能查看或者其他操作。但是，這樣很不合理，用戶可以通過 postman等工具發起請求，而不通過系統。所以，我們得--
在后端做一層限制
我們獲取到后端返回的接口權限，比如接收到下面這些數據：
{
code: 0,
msg: 'ok',
results: {
getUserList: {
url: '/api/get/user/list', // 當然，可以按照前后端規定返回，不一定是真實的 url ...
enable: true
},
editUser: {
url: '/api/edit/:uuid',
enable: false
}
}
}我們得到數據之后，跟前端保存的內容做比對，再按照條件控制，接口需要做對應的限制訪問，而不是單純前端判斷。
<!-- demo.component.html --> <button *ngIf="userObj.editUser.enable">Edit</button>
單純前端判斷：1. 不好維護 2. 不安全，用戶可以跨過瀏覽器請求
