检查angular2中的权限

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

}

然后是仪表盘服务

//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客户端附加存储在本地存储器中的访问令牌
canUser（权限：字符串）：可观察{//返回true或fals
返回此.httpclient.post（this.url，权限）
.map（此.extractData）
}

上面的循环总是执行http post

---

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

这是模板中的行：

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

也就是说，在执行之后，结果从服务器返回，强制angular检查是否有更改；Angular会再次重新启动组件，当然还会再次调用服务器

---

只需记住组件变量中的结果，将此变量填入

ngOnInit

，然后使用变量而不是函数。

首先，使用

*ngIf

而不是列表项中的

[hidden]

现在让我们来看看代码中的重要部分，它将进入无休止的循环。列表项的可见性绑定到

canAccess（）

函数，该函数返回一个

可观察的

。它应该绑定到一个变量、函数或操作，该变量或函数或操作返回一个

布尔值或一个可以测试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>

有一个同构授权库，称为。您可以在Aurelia应用程序中阅读有关其集成的信息：

我有20多个权限要检查，这是否意味着我必须创建20个变量来检查init创建一个后端端点，该端点返回所有变量并将其存储为对象/数组？或者发出20个请求并将它们存储在一个对象/数组中？@GEOFFREYMWANGI实际上，您的函数当前返回的是一个
可观察的
，而不是
布尔值
=>它总是
真的
我认为，当我订阅可观察值时，基于后端的内容，结果将是真的或假的returnShed more light我有20多个权限要检查，这意味着在服务调用中有20个变量，您可以将所有权限作为一个对象（每个属性代表一个权限）。然后在HTML模板中使用它作为
*ngIf=“permissions.dashboard”
，
*ngIf=“permissions.other_部分”
等。上面的程序将进入无限循环，因为它会不断检查值是否更改。这是angular 2检查变化检测的功能。所以plz不要在[hidden]或*ngIf中使用任何函数。您可以在组件的ngOnInit（）中调用函数来代替它。并将其响应存储在布尔值中，您可以使用*ngIf或[hidden]在html部分中使用该布尔值。如果你想，我可以添加一些代码来解释这个过程的答案。
<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;
        }
    )
}