小编Moh*_*hey的帖子

如何根据用户角色 Angular 4 显示/隐藏元素

我正在开发一个具有多个用户类型的项目(超级用户 - 学校管理员 - 教师)

每个角色都有特权看到一些元素。

如何使用 *ngIf 根据登录的用户角色隐藏元素?

这是Stack-blitz 上的项目链接,我上传了其中的一些内容来指导我进行实时预览。

在app里面你会发现common services >> auth,这是有登录服务和认证保护的文件夹。

在models >> enum 里面,你会发现用户类型enum。

在组件登录中,您将找到定义用户类型的表单。

在路由内部,您将看到为每个组件制定的预期角色。

我为测试而创建的用户:

这应该将您路由到学校列表

管理员(具有超级用户角色):test1@test.com 密码:12345

这应该将您路由到仪表板

学生(有学生角色):test2@test.com 密码:12345

例如,我想隐藏仪表板上的元素,只显示给超级用户角色,我该怎么做?

我知道 ngIf 有一种方法,但我坚持在 NgIf 中编写它的正确方法,我想要我的代码示例而不是虚拟代码。

更新:问题已解决,因此我删除了用于测试的用户。

authentication user-roles typescript angular-ng-if angular

1
推荐指数
1
解决办法
2万
查看次数