Hello! I am new to the world of frontend, so please do not judge strictly.
Will develop an application for Angular 2, the appearance of which will depend on the role of the user.

Suppose there is a directory with some objects.

For a user with the Admin role, 2 buttons must be available opposite each entry: edit, delete.

For a user with the role of Editor , 1 button must be available opposite each entry: edit.

For the user with the role of the Reader, there should be no buttons available to modify or delete directory entries.

Accordingly, the question is - how best to implement it?

I have such an idea: The user is authorized by calling the POST /login method, while in response he is returned the rights to all types of application objects to which he has access:

for admin return from server:

 [{"someDictionary" : {"read" : "true", "update" : "true", "delete" : "true"} }]

for the editor will return from the server:

 [{"someDictionary" : {"read" : "true", "update" : "true" } }]

for the reader will return from the server:

 [{"someDictionary" : {"read" : "true", "update" : "true", "delete" : "true"} }]

Further, on the basis of the received array of user rights, we show or hide components on the UI (+ of course, checks on the backend).

From the above option, I see such cons

  1. In case of a change of rights, the user will be able to use new rights only after the re-login.
  2. I feel that I reinvent the wheel.

Is there a better way to implement what is described above? Tell me please.

  • Everything is much simpler. It is necessary to create one-off modules for different types of users and they have different components with different buttons and so on. When navigating to routes, you need to use role-based guards. - Nazar Kalytiuk

1 answer 1

As for me, the simplest option is that in the database for each user there will be a field with his rights (for example, admin-1 reader -2 editor -3) after logging you get this value and depending on this value the necessary interface is displayed (check set * ngIf or swichCase in template)

  • So in the end I did, as Alexander Lonsky advised. Thank! - none