41-3 Stocker le rôle dans le jeton JWT

L'option la plus évidente est de retourner le rôle de l'utilisateur dans le jeton enregistré dans le localStorage. L'enjeu avec cette méthode est qu'une fois le jeton reçu et enregistré dans le localStorage, le rôle demeurera le même pour l'utilisateur tant et aussi longtemps que le jeton reste valide.

Ainsi, si on change un utilisateur de 'admin' à 'utilisateur' au niveau de la base de données, l'application client n'a aucune façon de le savoir.

L'utilisateur doit se déconnecter et se reconnecter pour recevoir un nouveau jeton ou encore on s'assure d'avoir en place un mécanisme de rafraichissement du jeton.

Par contre, même si un utilisateur se retrouve avec un mauvais rôle, nous avons toujours côté serveur une validation des rôles qui n'est pas basée sur le jeton lui-même, mais plutôt que le rôle stocké dans la base de données.

Ainsi, il n'y a pas d'enjeu de sécurité directe puisqu'un utilisateur qui ne serait en fait plus admin, ne pourrait pas interagir avec une URL demandant les droits admin. De plus, si un utilisateur venait qu'à modifier le jeton, ce dernier ne serait plus valide puisque cela changerait la signature du jeton.

On parle plus d'une inconvenance liée au changement de rôle qui n'est pas directement répercutée côté client.

Retourner le rôle dans le jeton (API Nest)

Afin de retourner le rôle dans le jeton, il suffit de modifier les actions de création de jeton pour y inclure le rôle de l'utilisateur.

Par exemple:

src/auth/auth.service.ts

    const access_token = this.jwtService.sign({
      sub: utilisateur.id,
      courriel: utilisateur.courriel,
      nomUtilisateur: utilisateur.nomUtilisateur,
      role: utilisateur.role,
    });
    return { access_token };

danger

Si vous créez un jeton lors de l'inscription, n'oubliez pas d'aller faire la modification là aussi! Vous pourriez centraliser cette action dans un service aussi.

Décoder le jeton côté client (Angular).

Côté client, on ajoute le décodage du rôle au jeton, pour l'assigner à l'utilisateur.

1. Ajoutez un enum pour le rôle

src/app/enums/role.enum.ts

export enum Role {
  Utilisateur = 'utilisateur',
  Admin = 'admin',
}

2. Modifiez le modèle JwtPayload pour qu'il contienne une propriété role, liée à l'enum Role
   src/app/models/jwt-payload.ts

   export interface JwtPayload {
     sub: number;
     courriel: string;
     nomUtilisateur: string;
     role: Role;
   }

3. De la même façon, modifiez le modèle Utilisateur

   export interface Utilisateur {
     id: number;
     courriel: string;
     nomUtilisateur: string;
     role: Role;
   }

4. Lors du décodage du jeton, assignez à l'utilisateur le rôle contenu dans le jeton
   src/app/core/services/auth.service.ts

   obtenirUtilisateur(): Utilisateur | null {
     //...
       utilisateur = {
         id: jwtPayload.sub,
         courriel: jwtPayload.courriel,
         nomUtilisateur: jwtPayload.nomUtilisateur,
         role: jwtPayload.role
       }
     //...
   }

Voilà, vous aurez maintenant accès à utilisateur.role dans votre application client pour restreindre l'accès à certaines fonctionnalités.