如何隱藏鏈接的警衛angular2

如何隱藏管理鏈接在視圖中的HTML。我不得不警惕：管理員和經理如何隱藏鏈接的警衛angular2

路由器配置：

{ 
    path: 'manager', 
    component: ManagerComponent, 
    canActivate: [ManagerGuard] 
}, 
{ 
    path: 'user', 
    component: UserAdminComponent, 
    canActivate: [AdminGuard] 
}

鑑於：

<li> 
    <a routerLink="/user" routerLinkActive="active-link">User</a> 
</li>

我想隱藏/用戶關聯ManagerGuard時，但顯示AdminGuard。

來源

2016-11-09 Andrei

此外，如果已經以可能有幫助的方式回答，我在這裏使用另一種方法。正如你已經在國民警衛隊的canActivate方法，你也可以與逆天注入你的導航組件，您可以直接調用這些canActivate方法：

在您的組件保持導航

constructor(private adminGuard: AdminGuard)

，然後在模板

<li *ngIf="adminGuard.canActivate()"> 
    <a routerLink="/user" routerLinkActive="active-link">User</a> 
</li>

編輯

這不起作用在我的情況下prod模式（如果你使用參數必須注入）。我只是試圖編譯它，但角度抱怨缺少的參數。如果不使用參數，這工作得很好，或者，如果你不使用你的函數的參數 - 然後簡單地傳遞

<li *ngIf="adminGuard.canActivate(null,null)"> 
    <a routerLink="/user" routerLinkActive="active-link">User</a> 
</li>

另一件事：如果你是像「adminGuard」變量在上面的模板，它必須是公開的 - 而不是私人的。

來源

2017-05-16 20:50:35 christoph

這是一個很好的解決方案。如果你的canActivate方法使用參數呢？例如canActivate（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）。你如何獲得指定的路由參數到模板中？ – Spikeh

我只是偶然發現了那一個。如果您試圖在prod模式下構建您的應用程序，它會抱怨那些缺少的參數。我會檢查是否有可能實現這個目標。 – christoph

我最終編寫了自己的自定義指令，它基本上取代了你的* ngIf。在我使用參數時，我無法直接調用它 - 所以我必須在需要應用權限的任何地方複製邏輯，例如* showForRoles =「[UserTypes.Admin，UserTypes.SuperUser]」 – Spikeh

在我看來，這與路由器本身無關。

您的衛兵可能會調用另一項服務，其中包含有關哪種用戶已登錄的信息：管理員或管理員。

您應該創建一個知道用戶類型的服務。然後將此服務與Dependency Injection一起插入您的組件中，您有routerLink。

在那裏，你可以要求服務和切換與*ngIf鏈接：

<li *ngIf="myService.getCurrentUser().isAdmin()"> 
    <a routerLink="/user" routerLinkActive="active-link">User</a> 
</li>

因此該服務提供了一個功能，讓你這是當前登錄的用戶和用戶的isAdmin() - 函數返回true或false。如果用戶是管理員，則會顯示<li>，否則將被隱藏。

這只是一個例子，但我希望你明白這一點。它與Angular 2的基本功能有關，而不是Angular 2的路由器。有關*ngIf的更多信息可在here找到。

來源

2016-11-09 13:34:04

我同意使用服務內部的邏輯而不是Guard是有意義的。 Guard應該保護組件不被授權訪問。它可能包括一些其他功能，如導航到訪問被拒絕的頁面。 – Bahman

如何隱藏鏈接的警衛angular2

回答

相關問題