1

So, I know how secure resources in REST backend that's not the issue. The problem I have is how to manage user/rights management on both the REST API and on the client applications/front-end?

Consider the following example, I have resources order and invoices in my API and I also have routes order, invoices and dashboard in my front-end application written in angular/react, for the sake of simplicity we should call those pages. I can store the rights in database for each role/user against end points and verbs that is fine however how do I manage the same thing on front-end? In the example it is possible that invoices, orders and dashboard can use both resources in some way so it's not a one to one relationship and from the perspective of the user it appears he has rights on pages. How do I maintain that relationship?

Should I store these front-end modules/pages/routes in the back-end as well by mapping it against REST endpoints however isn't such an approach violates the Single Responsibility principle as well as hinders the adaption of new client apps and scalability? If not should I encode the endpoints, verbs that user has access to in JWT and let the client app decides what to do with it using some kind of mapping between endpoints and pages on the client side however in this case I'll be increasing the size of JWT that grow exponentially when my endpoints increase?

My situation is even trickier in my case because front-end app is also responsible for assigning rights to the users. Think of it as a workflow engine or rights management where an admin user defines roles and gives permission to different pages (from the perspective of the user).

Can anyone tell me the best practices for implementing such kind of functionality. I didn't have such kind of problem in the old days without rest and web apps like JSF/ASP.NET because I have only one location to maintain the rights but REST based app changes those rules.

zhaider
  • 595
  • 2
  • 9
  • 26

2 Answers2

1

You may want to take a look into State Management. If you're not sure, State Management is a series of unique variables that are held within a 'store' in your front-end application. You can mutate, get and set these variables throughout the application and readily accessible from anywhere. Plus, no state or session information is being held in your back-end so still RESTful!

In your situation, when the User logs in, their Rights or Permissions may come as part of the JSON response or through the encoded JWT (that will help with managing the size of your JWT too, you won't have to put everything in there). The Rights are added into the state, and before the components are generated, you can check if the User has the correct permission and selectively load the components. You can do the same thing for function calls and API requests; no permission, no action.

For your Rights Management, you can still maintain this through simple API requests, and when the User logs in next, their Rights are refreshed!

There are several State Management libraries available for both React and Angular. The ones I am familiar with are Redux (React) and NGRX (Angular). There are also dozens of tutorials out there; you won't go wanting!

ManChildMan
  • 64
  • 1
  • 4
  • Okay, so if I understand you correctly, I'll be getting the user rights at the time of login in a response and not in JWT and store it locally. In other words backend will only notify what resources the user have access to and what actions it could perform then the front-end has to maintain all the mappings to the front-end components. Now there's one problem I could see arising from it, what will happen if the rights have been changed while the user is already logged in and he won't be able to see the new components he has access to. – zhaider Mar 28 '19 at 12:13
  • That's exactly right. We have a few methods for updating the State privileges depending on the system: Firstly, we have a middleware that checks for privilege updates each time an API call is made, which would be any page or component. If there is an update, we expire their JWT which will log the user out OR we allow the Admin to make the choice to log them out. Next, Web Sockets to update the frontend when a privilege change is committed. And lastly, the good ol' Admin asks the user to log out and in. – ManChildMan Mar 29 '19 at 02:29
  • Thanks for the clarification. Can you point me to some tutorials in NGRX and Redux specifically related to rights management? – zhaider Mar 30 '19 at 08:33
0

The best way to handle this would be to create a High Order Component in react.

  1. After the user logs-in from the web frontend you should be able to identify his role.
  2. You need to create a mapping of roles to pages/components
  3. Use the high order component to render all other components which require authorization.
  4. In the high order component have the logic to render the page/component only if the user is authorized or else move him to some other custom error/login page.

You can find more info here: https://www.codementor.io/sahilmittal/using-higher-order-components-for-authenticated-routing-i1hcp6pc6

Hope that answers your question!!

Jatin Nath Prusty
  • 557
  • 4
  • 16
  • Essentially it's the responsibility of the front-end app to map the pages/components to REST resources and back-end should keep track of it? – zhaider Mar 28 '19 at 12:15