Aller au contenu principal

22-4 Redirection vers page de connexion

Dans le cas où l'utilisateur n'a pas accès, on veut évidemment rediriger vers une page de connexion.

Créer une page de connexion​

Dans une fenêtre de terminal, créez une nouvelle composante de page pour la connexion.

ng g component features/connexion/pages/connexion

Ajouter une route vers la page de connexion​

On associera le chemin /connexion vers la nouvelle page. Sans toutefois protéger cette page par le guard puisqu'elle doit être active en tout temps!

src/app/app-routing.module.ts
//...

  {
    path: 'projets/:id/modifier',
    component: ProjetEdition
  },
  {
    path: 'connexion',
    component: Connexion
  }
];

Configurer la redirection​

Dans le cas où l'utilisateur n'est pas "authentifié", redirigeons-le vers la page de connexion.

Pour rediriger vers la connexion, à partir de la fonction de guard, il faudra utiliser le Router. Cependant, on ne peut pas injecter le Router comme dans les composantes puisque authGuard() n'est qu'une fonction!

  1. Utilisation de inject() pour injecter une instance. Pour injecter une instance d'une classe injectable à l'intérieur d'une fonction, on peut utiliser la fonction inject.
src/app/core/guards/auth-guard.ts
export const authGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const pseudo = localStorage.getItem('pseudo');
  
  if(pseudo){
    return true;
  }

  return false;
};
  1. Rediriger à l'aide du router.
src/app/core/guards/auth-guard.ts
export const authGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const pseudo = localStorage.getItem('pseudo');

  if(pseudo){
    return true;
  }

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

Test​

Supprimez manuellement la clé pseudo dans le stockage local de votre navigateur, essayez de rafraichir la page d'accueil et vous serez redirigé vers la page de connexion!

http://localhost:4200