應用在角2

Question

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

我還不熟悉Angular所提供的一切， ，所以我很想知道爲了實現這樣的功能可以接受哪種方式。

或者，如果可能的話，我很樂意收到有關該方法的一些意見，我已經採取了以下：

一旦用戶登錄時，他收到的權限列表，他有，例如：

• READ_POSTS
• EDIT_POSTS
• READ_USERS
• EDIT_USERS

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

然後我創建了一個指令（基本上是*ngIf的一個副本），用於檢查用戶是否擁有用戶擁有的權限列表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 roles and permissions

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 Post鏈接將顯示，如果EDIT_POSTS已經定義或添加許可商店。

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

Answer 3

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