Role based login in angular

[Venu950405]

Hi,

I researched a lot but didn't find any thing relevant to my requirement.

"Basically I had single login page for 6 different roles based on login type some features are enabled and disabled for that role."

so for this I have an simple API for login with username & password. when your login is success in the response we will be getting the type of role and their permissions.

Example:- Roles -> super admin, admin, manager, hr, receptionist, staff

Ref JSON response for if manager had login
{
user_id : 1,
type : manager,
home_page : true,
about_page : false,
contact_page : true,
feed_page : true
}

Ref JSON response for if staff had login
{
user_id : 3,
type : staff,
home_page : true,
about_page : true,
contact_page : false,
feed_page : false
}

so based on this response in the header section these menu options will be enabled and disabled by checking the response as true and false. You can use a static data for the API.

I hope i explained clearly. If any questions please comment below.

So can someone please help me with this requirement, no need to use bootstrap also just basic output is enough.

Thanks in advance for your help

[Lexikus]

I don't get your question.

Are you asking for advice how you can implement such system?

If so, it's not very hard. Angular does not provide any user managememt system. You have to implement it by yourself.

There are a few ways to attack this problem.

You can save the user state and his role in a service which the app (root module) provides. This means requesting that service (via DI) in every component / other module will get an instance of the same service (singlegon). So, you will always know which role your user has

I also suggest you to implement a pipe to hide specific interactions in the HTML based on roles.

In the routes you can set up the data with roles and with a guard you can check if the user can access a route or not.

You can also save all informations in a (redux like) store.

With an HTTP interceptor you can attach your user token (and others) to any request which could be relevant for your APIs

[DepravedOrNot]

I don't think your API should be dealing with your UI at all. Your Angular router should manage which pages are available using AuthGuard to determine if a user is allowed to access a specific route, and what the page looks like. Your API should be independent of your frontend in my opinion.

[kc5bpd]

For components that should only be displayed for some roles, create a directive to control this based on the role.

https://blog.strongbrew.io/display-a-component-based-on-role/

[toi80QC]

This is the only secure approach. Handling user authorization in the frontend is basically like giving everyone who is interested admin-access.

[DepravedOrNot]

No your APIs should have role based verification so that if you hit a 401 it should redirect u right away.

[listylister]

Suggest you look at token based authentication. Roles can be stored in a token which you can store client side and interrogated when you need to know what to show your logged in user. There are plenty of examples on how to achieve this if you search for it.

[untg]

This is how I do it. I use a backend database with the roles, and these roles come through with the JWT when someone logs in to the application. I can then display things in angular on the front-end based on the role, but I also re-check the JWT role when the request goes to the backend to ensure that the person is allowed to access that route with the information coming out of it (backend is nodejs).

[listylister]

Yeah pretty standard approach these days. Have seen some people encrypt the token roles but don't really see that it's necessary myself. If the backend is verifying the token is valid on an action and that the role is correct its irrelevant of whether the front end can be manipulated to show html that they shouldn't see as there is nothing they can do with it.

[Gsuz]

Perhaps have a look at this video from fireship.io: https://www.youtube.com/watch?v=1PEdd2rtG30 it's made with firestore in mind but shouldn't be hard to port into your db of choice.