Question

我有一个angular2应用程序，我已经实现了注册和登录模块。登录时会收到用户角色和其他详细信息。根据用户的角色，不知道如何正确管理访问权限。

目前，我希望使用Angular2服务在整个应用程序中共享用户角色和其他详细信息，并使用＆＃34; if＆＃34;基于角色管理访问的条件。

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

Answer 1

我会通过构建一个从用户成功登录时读取的对象来解决这个问题。

// when user logs in build out permissions object
permissions = {
  dashboardOne: true,
  dashboardTwo: true
}

然后在你的auth服务中，有一个函数根据用户的权限返回一个布尔值

userHasAccess = (() =>{
  return {
    toDashboardOne: () => {
      return this.permissions.hasOwnProperty('dashboardOne');
    },
    toDashboardTwo: () => {
      return this.permissions.hasOwnProperty('dashboardTwo');
    }
  }
})();

现在整个应用程序都可以调用上面的函数

if(this._authService.userHasAccess.toDashboardOne()){
  // do something
}

我希望这有助于您入门。欢呼声

Answer 2

您可以尝试使用ngx-permissions库来控制角度应用程序中的权限和角色。它将从DOM中删除元素的好处，支持延迟加载和隔离模块（然后，支持其他语法）。 加载角色的示例

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>

有关详细信息，请参阅wiki page

在Angular2

2 个答案: