如何隐藏链接的警卫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

回答

相关问题