angular - Kontrollera behörigheter i angular2

Jag är ny på Angular2 och jag har en sidopanel som jag vill visa och dölja baserat på användarbehörigheter

Detta är vad jag har gjort

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

Sedan i instrumentpanelens komponent

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

  )

}

Sedan _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)

 }

Ovanstående går in i en oändlig loop som alltid utför HTTP-post

Vad skulle jag kunna missa

Svar #1

För det första, använd *ngIf istället för [hidden] i listobjekten.

Nu till den viktiga delen av din kod som hamnar i en oändlig loop. Listobjektets synlighet är bunden till canAccess()-funktionen som returnerar en Observable. Den bör vara bunden till en variabel eller funktion eller operation som returnerar en boolean eller ett värde som kan testas för sant/falskt.

Gör något liknande detta:

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

Och koden för komponenten ska inkludera följande:

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

Svar #2

Angular upptäcker ändringarna och varje gång något ändras bygger det om HTML-koden.

Detta är raden från din mall:

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

vilket är, efter att det har körts och resultatet kommer tillbaka från servern, tvingar Angular att kontrollera om något har ändrats; Angular renderar om komponenten igen och självklart anropar servern igen.

Kom bara ihåg resultatet i din komponentvariabel, fyll i denna variabel i ngOnInit och använd variabeln, inte funktionen.