Question

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

根据用户/不具有某种角色的事实启用/禁用某些输入字段，因此，有效角色可以编辑记录，有些则不能
再次根据角色显示/隐藏“保存”按钮，再次阻止某些角色编辑

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

最佳做法是什么？

Answer 1

使用Ng2Permission模块directives进行显示/隐藏或启用/禁用元素。

例如，假设您已经PermissionService在Admin，Reporte等之间定义了一些权限。现在，在delete button权限定义的情况下启用了Admin或添加到权限商店。请看这个链接：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
}

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

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

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

再次根据角色显示/隐藏“保存”按钮，再次阻止某些角色编辑

这个相同

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

但是，如果用户在编辑字段时实际上是管理员，您希望在后端仔细检查这些内容。

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

2 个答案: