Aller au contenu principal

22-2 Guard d'authentification

Pour protéger et restreindre l'accès à certaines routes, Angular propose le concept de guard. Il s'agit d'une fonction exécutée avant de donner l'accès à une route. On vient ensuite associer aux routes, au besoin, un guard pour en restreindre l'accès.

Un guard fréquent est celui de vérifier si l'utilisateur est connecté ou authentifié à l'application. Dans le cas où ce dernier ne serait pas authentifié, on pourrait par exemple le rediriger vers l'écran de connexion.

Pour l'application, nous allons créer une protection vérifiant si l'utilisateur a choisi un pseudonyme. Ce dernier sera stocké dans le Local Storage s'il a été configuré.

Créer un guard d'authentification​

Angular CLI possède un raccourci afin de générer ces fonctions de guard.

  1. Via un terminal, créez un guard auth sous un dossier core/guards via la commande suivante: 
    ng g guard core/guards/auth
  2. Sélectionnez la première option CanActivate (barre d'espacement pour sélectionner et enter pour confirmer)
  3. Cela devrait avoir généré le fichier suivant:
    src/app/core/guards/auth-guard.ts
    import { CanActivateFn } from '@angular/router';

    export const authGuard: CanActivateFn = (route, state) => {
      return true;
    };
info

Le guard vient avec une fonction CanActivateFn qui est la fonction exécutée avant d'accéder à une route.

La fonction doit retourner true ou false tout dépendant si on doit permettre l'accès à la route.

Pour le moment, la version par défaut retourne simplement true.

Associer un guard à une route pour protéger l'accès​

Afin d'associer la protection à une route, on ajoute un paramètre CanActivate à cette dernière.

Par exemple, pour protéger la page d'accueil, on ferait:

src/app/app.routes.ts
export const routes: Routes = [
  {
    path: '',
    redirectTo: 'projets',
    pathMatch: 'full'
  },
  {
    path: 'projets',
    component: ProjetsIndex,
    canActivate: [authGuard]
  },
  //...
info

CanActivate prends un tableau de fonctions Guard. Dans le cas qui nous occupe, on passe un tableau d'un élément, soit notre fonction authGuard.

Cela ne devrait rien changer pour le moment puisque la fonction de guard retourne true.

Associer un guard à plusieurs routes​

Le guard doit être ajouté à toutes les routes que vous voulez protéger. Par exemple, si on veut protéger plusieurs routes:

src/app/app.routes.ts
export const routes: Routes = [
  {
    path: '',
    redirectTo: 'projets',
    pathMatch: 'full'
  },
  {
    path: 'projets',
    component: ProjetsIndex,
    canActivate: [authGuard]
  },
  {
    path: 'projets/creer',
    component: ProjetEdition,
    canActivate: [authGuard]
  },

  //...

Modifier le retour de la fonction authGuard​

Modifiez le retour de la fonction pour false et tentez d'accéder à la page de liste de projets.

src/app/guards/auth.guard.ts
export const authGuard: CanActivateFn = (route, state) => {
  return false;
};

Vous aurez maintenant une page d'accueil vide (pour la zone dynamique)!

http://localhost:4200