Angular
Mise en Pratique

Exemple de Protection

Voici un cas réel : un formulaire de connexion. Une fois connecté, l'état de l'utilisateur est stocké globalement, ce qui permet d'afficher des menus cachés et d'accéder aux pages protégées par le Guard qu'on a vu précédemment.

Espace Sécurisé

Identifiants de test :
Utilisateur: admin | Mot de passe: 123456

Comment ça fonctionne ? (Gestion de l'État)

1. Se connecter

Lorsqu'on valide le formulaire, on vérifie les identifiants. S'ils sont bons, on "enregistre" l'utilisateur dans une mémoire globale appelée le Store (avec l'outil NgRx), puis on le redirige vers le tableau de bord.

// Dans le code de la page de connexion :
this.store.dispatch(setActiveUser()); // Active l'utilisateur dans le Store
this.router.navigate(['/dashboard']); // Redirection

2. Se déconnecter

Sur le bouton "Se déconnecter" (qui se trouve en haut dans la barre de navigation), on envoie une action inverse au Store pour effacer l'utilisateur, et on le ramène sur la page de connexion.

// Dans le composant Navbar :
this.store.dispatch(removeActiveUser()); // Supprime l'utilisateur du Store
this.router.navigate(['/login']); // Redirection

3. Afficher ou masquer les menus

La barre de navigation écoute en permanence le Store pour savoir si l'utilisateur est connecté. Si c'est le cas, elle affiche le menu "Dashboard" et le bouton de déconnexion. Sinon, elle affiche seulement le bouton "Se connecter".

// Le composant s'abonne au Store pour réagir en temps réel :
this.store.select(selectIsLoggedIn).subscribe(estConnecte => {
  this.isloggedIn.set(estConnecte);
});

Code Source Complet

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { setActiveUser } from '../../../ngrx/data.slice';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  username = '';
  password = '';
  errorMessage = '';

  constructor(private router: Router, private store: Store) {}

  onLogin() {
    if (this.username === 'admin' && this.password === '123456') {
      // On sauvegarde l'état de connexion dans le Store
      this.store.dispatch(setActiveUser());
      this.router.navigate(['/dashboard']);
    } else {
      this.errorMessage = 'Identifiants incorrects.';
    }
  }
}