Angular 2根据角色/声明显示/隐藏组件/零件 [英] Angular 2 show/hide components/parts based on roles/claims

问题描述

我试图了解有关角度应用程序安全方面的最佳实践. 可以说我有一个带有模型细节屏幕的视图.根据给定用户的角色/权限(例如，从jwt声明中获取)，我希望能够做的是:

I am trying to understand best practices about security aspect of angular application. Lets say i have a view with details screen of the model. What i want to be able to do, based on roles/permissions for the given user (gotten from jwt claims, for example) is:

1. 根据以下事实来启用/禁用某些输入字段:用户是否具有特定角色，实际上，某些角色可以编辑记录，而某些角色则不能

1. enable/disable certain input fields based on the fact if user is/isn't of certain role so, effectively some roles can edit the record and some can't

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

show/hide 'save' button again based on role, again to prevent certain roles from editing

我知道这里有canActivate，但是如果感觉像在组件级别，并且我需要的是一种更细化的方法，以根据角色更改组件内的内容.

i understand there is canActivate but if feels like on a component level and what i need is a bit more granular approach to change things within components based on roles.

最佳做法是什么?

推荐答案

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

Lets assume you have a profile saved somewhere in an object.

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

1. 基于以下事实来启用/禁用某些输入字段:用户是否具有某种特定角色，实际上，某些角色可以编辑记录，而某些角色则不能

您可以根据他的角色添加残疾人

you can add disabled based on his role

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

1. 再次根据角色显示/隐藏保存"按钮，再次阻止某些角色进行编辑

与此相同

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

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

However, you want to double check these things in the backend if the user is actually an admin when editing fields f.e.

这篇关于Angular 2根据角色/声明显示/隐藏组件/零件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！