22-5 Service AuthService

Tout comme on cherche à extraire les appels d'API des composants pour les concentrer dans des classes de service, on voudra sortir de la fonction de guard la référence au localStorage et les références aux détails d'implémentation comme la clé pseudo.

On créera plutôt un service AuthService qui exposera des fonctions telles que est estConnecte(), connexion() et un getter permettant de retourner l'utilisateur courant.

Créer le service AuthService

ng g service core/services/auth-service

Ajouter la fonction estConnecte()

Afin de vérifier si un utilisateur est connecté, ajoutez une fonction estConnecte().

src/app/core/services/auth-service.ts

export class AuthService {

  constructor() { }

  estConnecte() {
    const pseudo = localStorage.getItem('pseudo');

    if(pseudo){
      return true;
    }
    
    return false;
  }
}

Utiliser estConnecte() dans le guard

Plutôt que de faire appel au stockage local dans le guard, utilisons la classe de service en prenant soin de premièrement l'injecter.

src/app/core/guards/auth-guard.ts

export const authGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const authService = inject(AuthService);
  
  if(authService.estConnecte()){
    return true;
  }

  return router.navigate(['connexion']);
};