Dynamic authguard techniques

[dapper oxide]

Hi guys im trying to build an application which has roles based dynamic menus , every time the user logs in ill get the menus list from api and render the menus, the menus have 2 level of submenus , now since its a role based application i want to restrict the users from accessing the routes that they are not authorized for.

my doubt here is, what is the best way to handle this? can some of you share your experience on handling this scenario?
please let me know of the best practices and the best approach for this.

My initial taught was to apply auth guard for every component in the route (over 50 components are there) and then inside the auth.guard.ts ill just call the menus api initially and check the route is present in it and return true if its present .

Im pretty sure this is not the best approach, so please help.

[vocal iris]

Have some singleton service holding the current user with its roles as a shared observable or Signal. And use that current user in your components to decide what should be displayed or not.

[dapper oxide]

oh okay , so its the similar approach as the one i said, so like i call the guard in each compoenet right?

like this

and everytime i hit the route i call the guard and check if the route is available and return

[vocal iris]

What matters to the component displaying the menu is the roles of the current user. Whether you have a guard or not doesn't matter for that.
Now, if you want to prevent access to a route based on the roles of the user, then yes, the route should have a guard. But of course the roles to check in the guard will vary for each route. So either you need several types of guard, or you need to set the accepted roles as data on the route, so that the guard can get them from the activated route and compare them to the current user's roles.

[tacit lichen]

I just wanna add that you can have multiple guards, and each of them is evaluated.
So you can have a single guard for each role permission and use when needed

[midnight kraken]

Hey @dapper oxide 👋 Since you need to control access to particular routes

now since its a role based application i want to restrict the users from accessing the routes that they are not authorized for.

you can create a component-less route, add the guard on that route, and add all remaining routes as children. In this way, you will control access only once in your code and it will be more scalable if you want to add more routes. I hope that helps 🙂

[dapper oxide]

oh ok ill try that one

thanks (:

[dapper oxide]

no actually its a role based app but with no roles in specific, every user is given some permission thats diffrent from others :/

anyways thanks for the rply (: