如何在angular 2中管理角色和权限 [英] 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

in local storage now I want to create a function on which I will pass CREATE_DISBMT_WORKFLOW if it's there in above permission object that it should return true else false

在 angular 2 中这样做的方法是什么

what is the way to do that in angular 2

这里我的逻辑是如果它返回 true 数据将使用 *ngIf 等显示

here my logic is if it returns true data will display using *ngIf etc.

推荐答案

对于管理 angular2 应用程序的权限和访问控制，您可以使用 ng2-permission 模块.

For manage permissions and access control for your angular2 applications, you can use ng2-permission module.

将 Ng2Permission 导入您的应用模块:

Import Ng2Permission into your app's modules:

import { Ng2Permission } from 'angular2-permission';

@NgModule({
  imports: [
    Ng2Permission
  ]
})

您还可以使用 PermissionService 管理权限.请参阅此链接:管理权限.

You can also manage permissions with PermissionService. see this link: Managing permissions.

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 已经定义或添加到权限存储中，则会显示删除按钮.

This module also contains two directive for controlling access in views. For example, the delete button will displayed, if DELETE_DISBMT_WORKFLOW already defined or add in permission store.

<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，保护路由.

You can use PermissionGuard from Ng2Permission module, protecting routes.

import { PermissionGuard, IPermissionGuardModel } from 'angular2-permission';

const routes: Routes = [
    {
        path: 'users',
        component: UserListComponent,
        canActivate: [PermissionGuard],
        data: {
            Permission: {
                Only: ['GuestUser'],
                RedirectTo: '403'
            } as IPermissionGuardModel
        },
        children: []
    },
//.
//.
//.

这篇关于如何在angular 2中管理角色和权限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！