如何在角度 2 中管理角色和权限

Question

嗨，我存储了以下数据

"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

在角度 2 中做到这一点的方法是什么

在这里，我的逻辑是，如果它返回真实数据，将使用 *ngIf 等显示。

Answer 1

如果您调整权限数据对象，使权限名称是键而不是权限 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;
}

Answer 2

要管理angular2应用程序的权限和访问控制，可以使用ng2权限模块。

将Ng2Permission导入到应用的模块中：

import { Ng2Permission } from 'angular2-permission';
@NgModule({
  imports: [
    Ng2Permission
  ]
})

您还可以使用 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模块中使用权限保护，从而保护路由。

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