ルートデータを使用したテンプレートとルートの角度4のアクセス許可管理

Question

角度アプリでいくつかの権限を追加したいと思います。私はすでに正常にログインし、私はローカルストレージに保存すると、私は現在のユーザーのアクセス許可リストを持っています。ここで

は私の許可データ

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

のいくつかの例です。私はこれを検索しましたし、私は私の問題を解決するためにroute.dataを使用することができますように私に見えるように見えますが、私は設定方法がわからないと、これを使って。

Answer 1

角度アプリケーションのアクセス許可を制御するためにngx-permissionsライブラリを使用することをおすすめします。 DOMから要素を削除し、遅延読み込みがサポートされ、それ以外の構文もサポートされるという利点があります。テンプレート

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

におけるローディング権限

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

使用の 例