Jaki jest najlepszy sposób pracy z uprawnieniami w Angular 4?

Question

W moim projekcie Angular 4 chciałbym pracować z uprawnieniami, które otrzymuję od API. Uprawnienia są zapisywane jako tablica z identyfikatorami. Niektóre pojedyncze elementy, takie jak użytkownik lub blog, mają właściwość z dozwolonymi uprawnieniami, które zezwalają lub nie zezwalają na takie akcje, jak edycja lub usunięcie, jako tablica z identyfikatorami.

Jaki jest najlepszy sposób sprawdzania i obsługi uprawnień w 4 projektach Angular? Czy niektóre z rozwiązań bos można wykorzystać do obsługi uprawnień? Czy ktoś może mi dać pomysły na realizację obsługi pozwoleń, jeśli Angular nie ma jakiegoś gotowego rozwiązania?

Answer 1

jak Rahul komentarzu mówi jedno rozwiązanie wyjęciu z pudełka jest bardziej prawdopodobne, co chcesz są Guard ..

Pamiętaj straży są tylko dla routingu .. więc tylko sprawdzić, czy użytkownik może uzyskać dostęp do trasy lub nie .. ale nie wyświetlać pojedynczego elementu w komponencie opartym na rolach lub czymkolwiek .. do tego proponuję użyć *ngIf lub pokazać, aby renderować/wyświetlać lub nie niektóre elementy interfejsu użytkownika ...

Dla jednego strażnika na podstawie Role (nie tylko jeśli użycie jest autoryzowane czy nie) .. możesz zrobić coś takiego:

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']); 
      }); 
     }); 

    } 
} 

a następnie można użyć w routingu jak:

{ 
     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

Można spróbować użyć ngx-permissions bibliotekę do kontrolowania uprawnień w kątowym aplikacji. Korzyści z usunięcia elementów z DOM. Przykład uprawnieniami załadowczych

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); 
    }) 
    } 
} 

Wykorzystanie szablonów

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