Styjun

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.

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!!

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!