在Angular 4中使用权限的最佳方式是什么？

Question

在我的Angular 4项目中，我想使用API​​获得的权限。权限被保存为带有ID的数组。像用户或博客文章这样的单个元素具有带有权限的属性，这些权限允许或不允许像编辑或删除操作那样操作为具有ID的数组。

在Angular 4项目中检查和处理权限的最佳方法是什么？有角度的权限处理的解决方案的一些解决方案吗？如果Angular没有一些开箱即用的解决方案，有人可以给我一些实现权限处理的想法吗？

Answer 1

像拉胡尔评论说，一个解决方案开箱更可能你想要的Guard ..

记住后卫什么是只针对路由..所以只检查一个用户可以访问路线或不..但不显示基于角色或任何组件的单个元素..为此，我建议你使用*ngIf或显示来渲染/显示或不显示某些UI元素...

对于一个警卫基于角色（不仅如果使用授权或不），你可以做这样的事情：

import { Injectable } from "@angular/core"; 
import { AuthService, CurrentUserService } from "app/shared/services"; 
import { Router, RouterStateSnapshot, ActivatedRouteSnapshot, CanActivate } from "@angular/router"; 
import { AspNetUsersDTO } from "app/shared/models"; 
import { Observable } from "rxjs/Rx"; 

@Injectable() 
export class RoleGuard implements CanActivate { 

    constructor(private authService: AuthService, 
     private _currentUser: CurrentUserService, 
     private router: Router) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> { 
     return new Promise<boolean>((resolve, reject) => { 

      if (!this.authService.isLoggedIn()) { 
       resolve(false); 
       return; 
      } 


      var currentUser: AspNetUsersDTO = new AspNetUsersDTO(); 

      this._currentUser.GetCurrentUser().then((resp) => { 
       currentUser = resp; 
       let userRole = currentUser.roles && currentUser.roles.length > 0 ? currentUser.roles[0].toUpperCase() : ''; 
       let roles = route && route.data["roles"] && route.data["roles"].length > 0 ? route.data["roles"].map(xx => xx.toUpperCase()) : null; 

       if (roles == null || roles.indexOf(userRole) != -1) resolve(true); 
       else { 
        resolve(false); 
        this.router.navigate(['login']); 
       } 

      }).catch((err) => { 
       reject(err); 
       this.router.navigate(['login']); 
      }); 
     }); 

    } 

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> { 

     return new Promise<boolean>((resolve, reject) => { 

      if (!this.authService.isLoggedIn()) { 
       resolve(false); 
       return; 
      } 


      var currentUser: AspNetUsersDTO = new AspNetUsersDTO(); 

      this._currentUser.GetCurrentUser().then((resp) => { 
       currentUser = resp; 
       let userRole = currentUser.roles && currentUser.roles.length > 0 ? currentUser.roles[0].toUpperCase() : ''; 
       let roles = route && route.data["roles"] && route.data["roles"].length > 0 ? route.data["roles"].map(xx => xx.toUpperCase()) : null; 

       if (roles == null || roles.indexOf(userRole) != -1) resolve(true); 
       else { 
        resolve(false); 
        this.router.navigate(['login']); 
       } 

      }).catch((err) => { 
       reject(err); 
       this.router.navigate(['login']); 
      }); 
     }); 

    } 
} 

然后你就可以在你的路由喜欢使用：

{ 
     path: 'awards-team', 
     component: AwardsTeamComponent, 
     canActivateChild: [RoleGuard], 
     children: [ 
      { 
      path: 'admin', 

      component: TeamComponentsAdminComponent, 
      data: { roles: ['super-admin', 'admin', 'utente'] } 
      }, 
      { 
      path: 'user', 

      component: TeamComponentsUserComponent, 
      data: { roles: ['utente'] } 
      } 
     ] 
     } 

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 { 
    const perm = ["ADMIN", "EDITOR"]; 

    this.permissionsService.loadPermissions(perm); 

    this.http.get('url').subscribe((permissions) => { 
     //const perm = ["ADMIN", "EDITOR"]; example of permissions 
     this.permissionsService.loadPermissions(permissions); 
    }) 
    } 
} 

在模板中使用

<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>