Angular Authentication: Role Based Authorization 

This is my first time building a Internet application (im a junior front end dev). Normaly we only do intranet applications but this series has helped me sooooo much to get in touch with JWT Interceptors and a basic login system. THANK YOU SO MUCH!!!!!

Great video! Managed to do it thanks to you :D Thanks a lot for the content once more!

Excellent, Very simple and straight to the point. Thanks

Fantastic explanation awaiting for many more

as usual brief and exactly to the point

Just wants to say thank you, saved my semester ❤

Great video, really helped me to understand the concept.

Great video. Really helpful

great video for us we wait others thanks

Useful video, thanks

Thanks, very helpful.

THANKYOU MY FRIEND!

Great video!

Very Nice And Useful

φιλε εισαι απλα θεος

Nice technique to parse the allowed roles from the access token.

very helpfull

Great , kindly upload Oauth validations , OKTA like that

Great content. May I know extension to create component and guards?

Brilliant! What happens when you have several roles that require access? My role setup isn't hierarchical .

What plug in are you using in viscose for schematics?

Greet video! Thnx! What theme you use in VSCode?

hi in the guard file the window.alert or the console.log doesnt work it doesnt respond with anything also the guard works but with every role no matter if youre the admin you stilld ont get access to the guarded component

Is it necessary to decode the way you did the role info from token, why don't just send the serialised object from server. Personally I don't like accessing info by using index signatures 😜 In addition I want to learn is it safe to store role in the local storage? Otherwise thanks for the video

What is the syntax to allow more than one role to access the page?

can you do a video where the admin sees a different navigation bar then the user?

Hi After that how to hide components based on role provided in route of data

Thank you for this awesome tutorial series! I'm just in my first month of learning Angular so I cannot guarantee I got everything perfectly correct, but I'll leave here the issues I've encountered and how I solved them, in case it will help anyone (I used Angular 16) : --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * has-role.guard.ts * - From what I understand 'implements CanActivate' in Angular Guards is deprecated in Angular 16; I found out because I do not have a VSC plugin to generate angular elements by right clicking on folders, I use the CLI instead and this is the command : ng generate guard hasRole - I replaced the assignation of isAuthorized variable from 'this.authService.user.roles.includes(route.data.role);' to 'return authService.userRole?.role.includes(route.data['role']) ?? false;' Because I got the error 'type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | undefined' is not assignable to type 'CanActivateFn'. Type 'boolean | undefined' is not assignable to type 'boolean | UrlTree | Observable | Promise'. Type 'undefined' is not assignable to type 'boolean | UrlTree | Observable | Promise'.' The error is related to the return type mismatch in hasRoleGuard function. The CanActivateFn type expects the guard function to return a boolean, a UrlTree object, an Observable, or a Promise. However, guard function was returning boolean | undefined. To resolve the issue, you can update your guard function to explicitly return a boolean value. In the updated code: The return type of the guard function is explicitly set as boolean. The AuthService is injected using the inject function from @angular/core, and its type is casted to AuthService. The ?. optional chaining operator is used to safely access the role property of authService.userRole. The nullish coalescing operator ?? is used to provide a default value of false if the result of authService.userRole?.role.includes(route.data['role']) is null or undefined. - Here's how my has-role.guard.ts code looked in the end: - import { CanActivateFn, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { AuthService } from '../services/auth.service'; import { Injectable, inject } from '@angular/core'; export const hasRoleGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => { const authService = inject(AuthService) as AuthService; const router = inject(Router); // console.log("user role: "+authService.userRole?.role); const isAuthorized = authService.userRole?.role.includes(route.data['role']) ?? false; if(!isAuthorized){ router.navigate(['']); } return isAuthorized; }; --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * auth.service.ts * - In the constructor I replaced the assignation of this.userRole variable from 'this.userRole = this.getUserRole(this.token); to ' this.userRole = this.token ? this.getUserRole(this.token) : null; ' Because I got the error 'Type 'null' is not assignable to type 'string'.' The ternary operator this.token ? this.getUserRole(this.token) : null is used to conditionally assign the value of this.getUserRole(this.token) to this.userRole if this.token is not null. If this.token is null, this.userRole is assigned the value undefined. This way, you avoid the error when this.token is null, and this.userRole will be assigned the appropriate value based on the token's availability. - I replaced the method in tap function from login method too: this.userRole = response.token ? this.getUserRole(response.token) : undefined; - I used 'user?: User' instead of 'user!: User' because I got the error 'Type 'User | undefined' is not assignable to type 'User'. Type 'undefined' is not assignable to type 'User'. ' triggered on the 2 this.user assigns mentioned above --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- * user.Role / user.role / user.roles / user.Roles * - Make sure you use just one of them, in all the places, including JWT property, User model, your auth.service, has-role.guard