在Angular2中实现基于ROLE的访问 [英] Implement ROLE based access in Angular2

问题描述

我有一个angular2应用程序，并且已经实现了注册和登录模块.登录时会收到用户角色和其他详细信息.对基于用户角色的访问管理一无所知.

I have an angular2 application and i have implemented the Registration and Login Modules. User role and other details are received when login in. Have no idea on how to properly manage access, based on the role of the user.

目前，我希望使用Angular2服务在整个应用程序中共享用户角色和其他详细信息，并根据角色使用"if"条件来管理访问.

At the moment i'm hoping to use a Angular2 service to share the user role and other details through out the application and use "if" conditions to manage access, based on the Role.

请向我提供有关如何正确执行此操作的任何信息.

Please provide me any information on how to properly do this.

推荐答案

您可以尝试使用 ngx-权限库，用于控制您的角度应用程序中的权限和角色.这样做的好处是可以从DOM中删除元素，支持延迟加载和隔离的模块(然后，还支持语法). 加载角色的例子

You can try to use ngx-permissions library for controlling of permissions and roles in your angular application. The benefits it will remove elements from DOM, lazy loading and isolated modules supported(then, else syntax is supported). Example of loading roles

import { Component, OnInit } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'app';

   constructor(private permissionsService: NgxPermissionsService,
               private http: HttpClient) {}

  ngOnInit(): void {
    NgxRolesService
    .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

    NgxRolesService.addRole('Guest', () => {
       return this.sessionService.checkSession().toPromise();
    }); 

    NgxRolesService.addRole('Guest', () => {
     return true;
    }); 
  }
}

模板中的用法

<ng-template [ngxPermissionsOnly]="['ADMIN']" (permissionsAuthorized)="yourCustomAuthorizedFunction()" (permissionsUnauthorized)="yourCustomAuthorizedFunction()">
    <div>You can see this text congrats</div>
 </ng-template>
<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
    <div>You can see this text congrats</div>
</div>

 <div *ngxPermissionsExcept="['ADMIN', 'JOHNY']">
   <div>All will see it except admin and Johny</div>
 </div>

有关更多信息，请参见维基页面

for more information see wiki page

这篇关于在Angular2中实现基于ROLE的访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！