how to implement different roles in an angular application with JWT

Question

I am trying to build an application with an express backend with jwt and with angular as frontend .

The problem is that I need to identify the users who log in to the application to redirect them to their respective panel. The type of user of each one is found in the database in a field (empty if it is a common user and admin).

The question is, what should I implement to identify the user?

This is the login, where users should be identified.

login(){
const user ={
  Email: this.UsuarioForm.get('Email')?.value,
  Password : this.UsuarioForm.get('Password')?.value
  }

  if(this.UsuarioForm.valid){
    this.userService.login(user).subscribe((data)=>{
      this.authService.setLocalStorage(data);
      console.log(data);
    },
    (error) =>{
      console.log(error);
    },

    ()=>{
      console.log('done!');
      this.router.navigate(['protected']);
    }
  );

}

}

and this is the "protected" route where it takes them at the moment. Here I was able to identify the users by the response status of the server, but I don't know if it is the best way to do it.

ngOnInit(): void {
this.usersService.protected().subscribe((data)=>{
  this.message = data.message;
  console.log(data);
},
(error) =>{
  if(error.status === 403){
    this.message= 'you are not authorized'
  }

  if(error.status === 200){
    this.message = 'The user is registered'
    console.log(this.authService.getExpiration());
  }

  if(error.status === 201){
    this.message= 'The user is registered and is admin'
    console.log(this.authService.getExpiration());
  }
  console.log(error);
},

() =>{
  console.log('http request done!')
}

);

}

Answer 1

You can use a canActivate guard to implement role-based access to your routes.
First, create a guard using this command ng generate guard yourRoleName
Then, you can check the role and do your logic inside the CanActivate method.
Here is a simple example:

import { Injectable } from "@angular/core";
import {
  CanActivate,
} from "@angular/router";

@Injectable({
  providedIn: "root",
})
export class YourRoleNameGuard implements CanActivate {
  canActivate() {
    const role = localStorage.getItem("role");
    if (role == "YourRoleName") {
      return true;
    }
    return false;
  }
} 

And add this guard for the routes you want to protect in app-routing.module.ts

const routes: Routes = [
  {
    path: "/your-path",
    component: YourComponent,
    canActivate: [YourRoleNameGuard],
  },
]
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

You can read more about guards from here