Angular 4 gestion des autorisations dans le modèle et la route en utilisant les données de route

Question

Je veux ajouter quelques autorisations dans mes applications angulaires. J'ai déjà ma liste d'autorisation d'utilisateur actuelle lorsque je suis connecté avec succès et j'économise sur le stockage local.

Voici quelques exemples de mes données d'autorisation

{id: 9, name: "configuration.role.restore", display_name: "Restore Role", description: ""} 

J'ai cherché cela et on dirait que je semble que je peux utiliser route.data pour résoudre mon problème, mais je ne sais pas comment définir et utilise le.

Answer 1

Je vous recommande d'essayer d'utiliser la bibliothèque ngx-permissions pour contrôler les permissions dans votre application angulaire. Les avantages qu'il retirera des éléments de DOM, le chargement paresseux est supporté, sinon la syntaxe est également supportée. Exemple d'autorisations de chargement

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 { 

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

    ngOnInit(): void { 
    const perm = ["ADMIN"]; 

    this.permissionsService.loadPermissions(perm); 

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

Utilisation dans les modèles

<ng-template [ngxPermissionsOnly]="['ADMIN']"> 
    <div>You can see this text congrats</div> 
    </ng-template> 
    <div *ngxPermissionsOnly="['ADMIN'']"> 
     <div>Admin will see this</div> 
    </div> 

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