Angular 2根据角色/声明显示/隐藏组件/部件

Question

我试图了解角度应用程序的安全性方面的最佳实践。 让我说我有一个模型的详细信息屏幕视图。 基于给定用户的角色/权限（例如，从jwt声明获得），我希望能够做的是：

1. 根据事实启用/禁用某些输入字段，如果用户是/不是某个角色那么，有效的某些角色可以编辑记录，有些则不能

2. 再次显示/隐藏基于角色的“保存”按钮，以防止某些角色被编辑

我知道有canActivate，但如果感觉像在组件级别上，我需要的是一种更细粒度的方法来根据角色更改组件内的东西。

什么是最佳做法？

Answer 1

使用Ng2Permission模块指令显示/隐藏或启用/禁用元素。

例如，假设您已经在PermissionService定义了Admin ， Reporte等的一些权限。现在，在下面的示例中，当Admin权限定义或添加到权限存储时启用delete button 。 请参阅此链接： PermissionService

<button type="button" class="btn btn-danger btn-xs" 
  [hasPermission]="['Admin']"
  onAuthorizedPermission="enable"
  onUnauthorizedPermission="disable">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  Delete
</button>

Answer 2

让我们假设您将一个配置文件保存在对象的某个位置。

{
  name: 'asdas',
  role: 1 // for example, 1 for normal user, 2 for admin
}

1. 根据事实启用/禁用某些输入字段，如果用户是/不是某个角色那么，有效的某些角色可以编辑记录，有些则不能

您可以根据自己的角色添加禁用

[disabled]="user.role === 1"

2. 再次显示/隐藏基于角色的“保存”按钮，以防止某些角色被编辑

这个也一样

*ngIf="user.role === 2"

但是，如果用户在编辑字段fe时实际上是管理员，则需要在后端仔细检查这些内容