![](/img/trans.png)
[英]how to manage user roles and permission in a full stack application made up of angular and .net core web api
[英]How to manage the roles and permission in angular 2
嗨,我已經存儲了以下數據
"permission": {
"1000": "CREATE_DISBMT_WORKFLOW",
"1001": "EDIT_DISBMT_WORKFLOW",
"1002": "EDIT_UPLOAD_PHOTO_DISBMT_WORKFLOW",
"1003": "EDIT_UPLOAD_CONFIRMED_DISBMT_WORKFLOW",
"1004": "EDIT_VERIFIED_DISBMT_WORKFLOW",
"1005": "VIEW_DISBMT_WORKFLOW",
"1006": "DELETE_DISBMT_WORKFLOW"
}
現在在本地存儲中,我想創建一個函數,如果它在上面的權限對象中存在,則應該在上面傳遞CREATE_DISBMT_WORKFLOW,該函數應該返回true,否則返回false
在Angular 2中這樣做的方式是什么
這是我的邏輯,如果它返回真實數據,將使用* ngIf等顯示。
如果您調整權限數據對象,使權限名稱是鍵而不是權限ID,則您的權限服務可能就這么簡單:
import { Injectable } from '@angular/core';
@Injectable()
export class PermissionsService {
private permissions: any = {}
constructor() { }
setPermissions(permissions: any) : void {
this.permissions = permissions;
}
canCurrentUser(permission: string) : boolean {
return (permission in this.permissions);
}
}
組態:
let permissions = {
"CREATE_DISBMT_WORKFLOW":"1000",
"EDIT_DISBMT_WORKFLOW":"1001",
"EDIT_UPLOAD_PHOTO_DISBMT_WORKFLOW":"1002",
"EDIT_UPLOAD_CONFIRMED_DISBMT_WORKFLOW":"1003",
"EDIT_VERIFIED_DISBMT_WORKFLOW":"1004",
"VIEW_DISBMT_WORKFLOW":"1005",
"DELETE_DISBMT_WORKFLOW":"1006"
}
this.permissionsService.setPermissions(permissions);
采用:
let hasPermission = this.permissionsService.canCurrentUser("CREATE_DISBMT_WORKFLOW");
但是,如果您需要保留原始權限數據結構,則此canCurrentUser(permission)
函數也將起作用(盡管可讀性較差):
canCurrentUser(permission: string) {
for (var key in this.permissions) {
if (this.permissions.hasOwnProperty(key) && this.permissions[key] === permission) {
return true;
}
}
return false;
}
要為angular2應用程序管理權限和訪問控制,可以使用ng2-permission模塊。
將Ng2Permission
導入到您應用的模塊中:
import { Ng2Permission } from 'angular2-permission';
@NgModule({
imports: [
Ng2Permission
]
})
您還可以使用PermissionService
管理PermissionService
。 請參閱此鏈接: 管理權限 。
import { PermissionService } from 'angular2-permission';
//.
//.
//.
constructor(private _permissionService: PermissionService) {
this._permissionService.define(['CREATE_DISBMT_WORKFLOW',
'EDIT_DISBMT_WORKFLOW', 'EDIT_UPLOAD_PHOTO_DISBMT_WORKFLOW',
'EDIT_UPLOAD_CONFIRMED_DISBMT_WORKFLOW', 'EDIT_VERIFIED_DISBMT_WORKFLOW',
'VIEW_DISBMT_WORKFLOW', 'DELETE_DISBMT_WORKFLOW']);
}
該模塊還包含兩個指令,用於控制視圖中的訪問。 例如,如果已經定義DELETE_DISBMT_WORKFLOW
或在權限存儲中添加,將顯示刪除按鈕。
<button type="button" class="btn btn-danger btn-xs" [hasPermission]="['DELETE_DISBMT_WORKFLOW']">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
Delete
</button>
您可以從Ng2Permission
模塊使用PermissionGuard,以保護路由。
import { PermissionGuard, IPermissionGuardModel } from 'angular2-permission';
const routes: Routes = [
{
path: 'users',
component: UserListComponent,
canActivate: [PermissionGuard],
data: {
Permission: {
Only: ['GuestUser'],
RedirectTo: '403'
} as IPermissionGuardModel
},
children: []
},
//.
//.
//.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.