Aller au contenu principal

22-6 Obtenir l'utilisateur connecté

Il serait pertinent de pouvoir obtenir le détail de l'utilisateur connecté, pour afficher son nom quelque part, dans la barre de navigation par exemple.

Créer un modèle Utilisateur​

Même si ce dernier ne contiendra qu'une seule propriété (pseudo), un modèle Utilisateur permettra de mieux encapsuler ce qui a trait aux utilisateurs. De plus, le modèle sera utile plus tard.

  1. Générer le modèle 
    ng g interface core/models/utilisateur
  2. Ajouter une propriété pseudo
    src/app/core/models/utilisateur.ts
    export interface Utilisateur {
      pseudo: string;
    }

Ajouter une fonction de service pour obtenir l'utilisateur​

src/app/core/services/auth-service.ts
obtenirUtilisateur(): Utilisateur | null {
  if(this.estConnecte()){
    const pseudo = localStorage.getItem('pseudo');
    const utilisateur = {
      pseudo: pseudo
    } as Utilisateur;

    return utilisateur;
  }

  return null;
}

Afficher le nom de l'utilisateur dans la navigation​

  1. Injectez AuthService dans NavbarComponent
    src/app/shared/components/navbar.ts
    export class Navbar implements OnInit {
      protected projets: Projet[] = [];

      constructor(private projetService: ProjetService,
                  private authService: AuthService) { }

      //...
  2. Créer un getter pour obtenir l'utilisateur du service
    src/app/shared/components/navbar.ts
    export class Navbar implements OnInit {
      protected projets: Projet[] = [];

      get utilisateur(){
        return this.authService.obtenirUtilisateur();
      }

      constructor(private projetService: ProjetService,
                  private authService: AuthService) { }
  3. Ajouter à la navigation le nom de l'utilisateur connecté, s'il est connecté.
    src/app/shared/components/navbar.ts
    @Component({
      selector: 'app-navbar',
      imports: [
        RouterLink,
        RouterLinkActive,
        NgbDropdown,
        NgbDropdownToggle,
        NgbDropdownMenu
      ],
      template: `
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom mb-4">
          <div class="container-fluid">
            <a class="navbar-brand" routerLink="">Houdini</a>
            <div class="collapse navbar-collapse" id="navbarMain">
              <ul class="navbar-nav me-auto">
                <li class="nav-item" ngbDropdown>
                  <a class="nav-link dropdown-toggle" ngbDropdownToggle role="button" aria-expanded="false">
                    Projets
                  </a>
                  <ul class="dropdown-menu" ngbDropdownMenu>
                    @for(projet of projets; track projet.id) {
                      <li><a class="dropdown-item" [routerLink]="['/projets', projet.id]">{{projet.nom}}</a></li>
                    }
                  </ul>
                </li>
              </ul>
              @if(utilisateur) {
                <ul class="navbar-nav">
                  <li>Allô, {{utilisateur.pseudo}}!</li>
                </ul>
              }
            </div>
          </div>
        </nav>
      `,
      styles: ``
    })

Admirez! À noter que vous devrez avoir manuellement mis un pseudo dans le localstorage.

http://localhost:4200