Überprüfung von Berechtigungen in angular2

Question

sind neu in angular2 und ich habe eine Sidebar, Ich mag würde

Benutzerberechtigungen zeigen und verstecken basierend auf

Das ist, was ich

<ul class="sidebar-menu"> 
    <li class="header">MAIN NAVIGATION</li> 

    <li [hidden] = "canAccess('dashboard')"> 
    <a routerLinkActive="active" routerLink="/dashboard"> 
     <i class="fa fa-dashboard"></i> 
     <span>Dashboard</span> 
    </a> 
    </li> 
</ul> 

Dann in der Dashboard-Komponente getan habe

canAccess(permission:string){ 
return this._dashboardService.canUser(permission) 
    .subscribe(res=>{ 
    return res 
    }, 
    err=>{ 
     return false; 
    } 

) 

}

Dann wird die _dashboardservice

//http client attaches the access token stored in local storage 

    canUser(permission:string):Observable<boolean>{ //returns true or fals 
    return this._httpclient.post(this.url,permission) 
    .map(this.extractData) 

} 

Das geht über zu einer Endlosschleife der HTTP-Post

immer Ausführung Was ich

Answer 1

Verwenden Sie zuerst *ngIf anstelle von [hidden] in den Listenelementen.

Nun zu dem wichtigen Teil Ihres Codes in Endlosschleife. Die Sichtbarkeit der Liste ist Sichtbarkeit ist an canAccess() Funktion gebunden, die eine Observable zurückgibt. Es sollte auf eine Variable oder Funktion oder Betrieb, die einen boolean oder einen Wert zurückgibt gebunden, die für truthy/falsy getestet werden kann.

Do etwas wie folgt aus:

<ul class="sidebar-menu"> 
    <li class="header">MAIN NAVIGATION</li> 
    <li [*ngIf] = "showDashboard"> 
     <a routerLinkActive="active" routerLink="/dashboard"> 
      <i class="fa fa-dashboard"></i> 
      <span>Dashboard</span> 
     </a> 
    </li> 
</ul> 

Und der Code für die Komponente sollte die folgenden Angaben enthalten:

private showDashboard: boolean = false; 

// Call this function appropriately on component init 
canAccess (permission:string) { 

    return this._dashboardService 
     .canUser(permission) 
     .subscribe(res => { 
      this.showDashboard = true; 
     }, 
     err => { 
      this.showDashboard = false; 
     } 
    ) 
} 

Answer 2

Angular fehlen könnte erkennt die Änderungen und jedes Mal etwas geändert wird es die HTML-umbaut.

Dies ist die Zeile aus Ihrer Vorlage:

<li [hidden] = "canAccess('dashboard')"> 

das ist, nachdem er ausgeführt wird und das Ergebnis vom Server zurückkommt, Winkel zwingt zu prüfen, ob sich etwas verändert wurde; Angular wiederholt die Komponente erneut und ruft natürlich den Server erneut an.

Denken Sie nur an das Ergebnis in Ihrer Komponentenvariable, füllen Sie diese Variable in ngOnInit und verwenden Sie die Variable, nicht die Funktion.

Answer 3

Es gibt eine isomorph Genehmigung Bibliothek, die CASL genannt wird. Sie können über die Integration in Aurelia App lesen:

https://medium.com/@sergiy.stotskiy/casl-based-authorization-in-aurelia-app-3e44c0fe1703