Dynamic Roles and permissions after authentication the user on angular 2/4 application

Question

I am creating an application with angular 2/4, Where my super-admin will create different tenants/roles and give access to different pages/features(permissions) so both things will be dynamic.

I can able to retrieve the pages and display them on menu. Implemented the menu by using this article : https://webcake.co/automating-your-main-nav-in-a-modular-angular-2-app/

Now I also want to guard the route so a user will not access the feature with manually typing the URL.

Need some more clarification of how to make dynamic routes or navigation which is getting from database.

Is there any way to do role-based authorization with dynamic role name and dynamic feature permissions?

Can any one help on this.

Answer 1

I'm a little late, but this particular guide helped me smooth out some things, if you're comfortable with JWT. The gist of it is that you'll have to send the roles/permissions of the user on login from the server. Your Angular app should store this "metadata" locally (in, say, localstorage) and use it to guard your routes. Guarding your routes can be easily done by Angular Guards.

Keep in mind, though, that this only protects you so far. Anybody can edit their localstorage (or sessionstorage or cookies for that matter), so your API end-points themselves must be guarded properly so that even if an unauthorized user somehow accesses your protected Angular routes, he/she will be rejected by the API.