angular - 检查 Angular2 中的权限

Question

我是 angular2 的新手，我有一个侧边栏，我想根据用户权限显示和隐藏它

这就是我所做的

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

然后在仪表板组件中

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

  )

}

然后是_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)

 }

以上进入无限循环，始终执行 http post

我可能会错过什么

Answer 1

首先，在列表项中使用*ngIf而不是[hidden]。

现在到代码的重要部分进入无限循环。 列表项的可见性绑定(bind)到返回Observable的canAccess()函数。它应该绑定(bind)到返回 bool 值或可测试值的变量或函数或操作对于真/假。

做这样的事情:

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

该组件的代码应包含以下内容:

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