在Angular 2中應用客戶端權限

Question

我正在創建一個簡單的Angular 2應用程序，其中我需要應用客戶端權限（不用說服務器端也應用了權限，但隱藏用戶不應該看到的組件是必要的。）

我還不熟悉Angular提供的所有東西，所以我很想知道為了實現這樣的功能，可接受的方式。

或者如果可能的話，我希望收到一些關於我在下面采取的方法的評論：

用戶登錄后，他會收到他擁有的權限列表，例如：

• READ_POSTS
• EDIT_POSTS
• READ_USERS
• EDIT_USERS

例如，這些將確定用戶是否應該看到應用程序周圍的編輯按鈕。

然后我創建了一個指令（基本上是*ngIf的副本），它檢查用戶是否具有針對UserService權限，該UserService包含用戶擁有的權限列表。

這基本上是指令的作用：

if (hasPermissions) {
  this.viewContainer.createEmbeddedView(this.templateRef);
}
else {
  this.viewContainer.clear();
}

它使用如下：

<div id="someContainer">
  <a *myPermissionDirective="'EDIT_POSTS'">Edit Post</a>
</div>

我對這種方法的主要問題是它似乎變得丑陋的通用組件包含一些應該顯示的元素和一些不 應該顯示的元素。

例如，假設我們用來顯示列表的名為listComponent的組件，我們將根據您擁有的權限使用它來顯示能夠編輯它們的用戶列表:(目前，您無法編輯其他管理員用戶）

• 用戶1編輯 - >
• 管理員1 [不應顯示編輯]
• 用戶2編輯 - >
• 用戶3編輯 - >

在非通用列表組件中，例如UserListComponent可能我們可以引用用戶特定權限，但由於我們使用的是通用權限，我們如何知道哪些是相關的？：EDIT_POSTS，EDIT_USERS，EDIT_ADMIN_USERS，EDIT_ARTICLE，EDIT_SYSTEM_SETTINGS等“

提前致謝。

Answer 1

在角度2有概念稱為守衛。可以使用“可以激活衛兵”。

Angular 2角色和權限

Answer 2

對於angular2應用程序的管理權限和訪問控制，您可以使用ng2-permission模塊。

app.module.ts

import { Ng2Permission } from 'angular2-permission';

@NgModule({
  imports: [
    Ng2Permission
  ]
})

login.component.ts

import { PermissionService } from 'angular2-permission';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    //...

    constructor(private _permissionService: PermissionService) { }

    login() {
        this._permissionService.clearStore();
        this._permissionService.define(['READ_POSTS', 'EDIT_POSTS', 'READ_USERS', 'EDIT_USERS']);
    }
}

*。html的

<div id="someContainer">
  <a [hasPermission]="['EDIT_POSTS']">Edit Post</a>
</div>

如果EDIT_POSTS已定義或添加到權限存儲中，則將顯示“ Edit Post鏈接。

您還可以使用Ng2Permission模塊中的PermissionGuard來保護路由。

Answer 3

您還可以使用使用相同方法的ngx-permissions庫，如果您來自角度1，它看起來有點不尋常，但它是從DOM中刪除對象而不是用css隱藏它的唯一方法。