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

现在，您的代码的重要部分进入无限循环。 列表项的可见性绑定到canAccess()函数，该函数返回Observable。它应绑定到变量或函数或操作，它们返回boolean或可以为 truthy / falsy

做这样的事情：

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

Answer 2

Angular检测到更改，每次更改内容时都会重建HTML。

这是您模板中的一行：

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

，执行后，结果从服务器返回，强制角度检查是否有变化; Angular再次重新呈现组件，当然再次调用服务器。

只需记住组件变量中的结果，在ngOnInit中填充此变量并使用变量，而不是函数。

Answer 3

有一个称为CASL的同构授权库。您可以在Aurelia app中了解它的集成：

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

检查angular2中的权限

3 个答案: