Lab 07 : Guard d'authentification

📖 Ressources

• Documentation sur les guards de route
• Interface CanActivate

🚀 Code de départ

step-5-album-wholesale-v16-post-add-custom-async-validator

Continuez depuis le résultat de votre lab précédent. Si vous avez besoin d'une copie fraîche, utilisez step-5-album-wholesale-v16-post-add-custom-async-validator comme base et complétez d'abord les Labs 05 et 06.

Dans ce lab, vous allez implémenter la protection de routes en utilisant un guard d'authentification fonctionnel. Vous allez créer un guard CanActivate pour restreindre l'accès aux utilisateurs authentifiés, construire un service d'authentification simple avec une logique de connexion, et rediriger les utilisateurs non autorisés vers la page de connexion.

📝 Instructions

Étape 1 : Créer le guard d'authentification

Créez un guard pour protéger les routes :

import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }

  return router.createUrlTree(['/login']);
};

Étape 2 : Appliquer aux routes

Ajoutez le guard à la configuration des routes :

const routes: Routes = [
  {
    path: 'albums/add',
    component: AlbumAddComponent,
    canActivate: [authGuard]
  }
];

Étape 3 : Créer le service d'authentification

Implémentez la logique d'authentification :

@Injectable({ providedIn: 'root' })
export class AuthService {
  private isAuthenticated = signal(false);

  login(username: string, password: string): boolean {
    if (username === 'admin' && password === 'admin') {
      this.isAuthenticated.set(true);
      return true;
    }
    return false;
  }

  isLoggedIn(): boolean {
    return this.isAuthenticated();
  }
}