Angular Basics : CanActivate—Introduction aux gardes de routage

Aujourd'hui, nous verrons comment nous pouvons nous assurer que les routes que nous créons dans Angular sont accessibles par les bonnes personnes et que nous empêchons l'accès non autorisé aux routes privées.

Conditions préalables

Les développeurs de tous niveaux, des débutants aux experts, peuvent lire cet article. Peu importe si vous connaissez les concepts pour débutants dans Angular. Voici quelques prérequis que vous devez avoir pour pouvoir suivre la démonstration de cet article :

• Un environnement de développement intégré comme VS Code
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• CLI angulaireversion 8.0 ou supérieure
• Une version récente d'Angular (ce post utilise la version 12)

Parmi les autres avantages, citons :

• Connaissance pratique du framework Angular à un niveau débutant

Plus de concepts de routage : Gardes

Jusqu'à présent, nous avons examiné de nombreux concepts de routage et comment Angular facilite la gestion de tous vos besoins de routage. Le besoin sur lequel nous allons nous pencher aujourd'hui est particulier : empêcher l'accès non autorisé.

Au cas où vous les auriez manqués, voici quelques articles supplémentaires sur Angular Basics sur le routage :

Pour tous les cas d'utilisation que nous avons construits jusqu'à présent au cours de cette série, vous pouvez remarquer que tout utilisateur qui utilise l'application peut naviguer n'importe où dans l'application. Ce n'est pas mal pour une application de test, mais dans une application réelle avec des utilisateurs réels, certaines routes doivent être privées et uniquement accessibles via l'authentification.

Il y a des raisons d'expérience utilisateur pour lesquelles cela est important. Parfois, les utilisateurs peuvent ne pas être autorisés ou vous devez récupérer des données pour un composant vers lequel ils naviguent ou même enregistrer les modifications en attente avant qu'un utilisateur ne quitte un composant.

Ce que vous auriez pu utiliser

Ce scénario n'est pas nouveau et il est donc possible que vous utilisiez simplement une simple instruction if pour vérifier si les utilisateurs sont connectés, et cela fonctionne pour un ou deux cas d'utilisation. Le problème ici est qu'il devient une répétition de code à mesure que votre application se développe et que d'autres composants sont ajoutés.

Angular fournit des gardes pour résoudre ce problème. Les gardes sont des interfaces déjà disponibles nativement dans Angular qui nous permettent de contrôler l'accès aux routes en fonction des conditions que nous fournissons dans la classe de l'interface.

Que sont les Route Guards ?

Les gardes de route angulaires sont des interfaces fournies par Angular qui, lorsqu'elles sont implémentées, nous permettent de contrôler l'accessibilité d'une route en fonction des conditions fournies dans l'implémentation de classe de cette interface.

Voici quelques types de gardes angulaires : CanActivate, CanActivateChild, CanLoad, CanDeactivate et Resolve.

Ce que nous construisons : CanActivate

Nous construisons le même composant Navbar que dans learticle précédent,Angular Basics : Obtenir des données à partir de fragments et de paramètres de requête , mais en créant une protection pour l'un des composants. La première chose à faire est decloner ce référentiel de modèles à partir de GitHub afin que nous puissions nous concentrer sur la création des gardes. Ouvrez le fichier décompressé dans votre code VS et, dans le modèle, exécutez cette commande :

installation npm

CanActivate répond essentiellement à la question : "L'utilisateur a-t-il accès à cette route ?" Nous utilisons cette garde pour empêcher l'accès aux utilisateurs qui ne sont pas autorisés à accéder à une route.

Créer un service d'authentification simple

La première chose à faire est de créer ou de connecter un service d'autorisation qui vérifie si un utilisateur est connecté avec des méthodes pour se connecter ou se déconnecter.

de générer service auth/auth

À l'intérieur, collez le bloc de code ci-dessous :

importer {Injectable} à partir de '@angular/noyau';@Injectable({Fourni dans: 'racine'
})
exportation classer Service d'authentification {est connecté= faux;
  constructeur() { }
est authentifié(){
    retourner ce.est connecté;
  }
}

Ici, nous avons créé une variable de vérificateur enregistrée et lui avons attribué une valeur fausse, puis nous avons créé une méthode pour renvoyer la valeur. La prochaine chose est de créer la garde. Vous pouvez également le faire simplement avec la CLI angulaire.

Création d'un garde

Dans votre terminal, exécutez la commande ci-dessous :

de générer garde auth/auth

Il vous demandera quelle garde vous souhaitez créer, choisissez CanActivate puis remplacez le contenu par le bloc de code ci-dessous :

importer {Injectable} à partir de '@angular/noyau';
importer {Peut activer,ActivatedRouteSnapshot,RouterStateSnapshot,Routeur} à partir de '@angulaire/routeur';
importer {Observable} à partir de 'rxjs';
importer {Service d'authentification} à partir de './auth.service';@Injectable({Fourni dans: 'racine'
})
exportation classer AuthGuard met en oeuvre Peut activer {
  constructeur(privéauthService:Service d'authentification, privérouteur:Routeur){};
  peut activer(suivant:ActivatedRouteSnapshot,Etat:RouterStateSnapshot):booléen {console.Journal('CanActivate appelé');
    laisserest connecté= ce.authService.est authentifié();
    si (est connecté){
      retourner vrai
    } autre {
      ce.routeur.naviguer(['/contact']);
    }
  }
  
}

Ici, nous enregistrons CanActivate dans la console. Nous vérifions également si l'utilisateur est authentifié. Si c'est le cas, nous retournons vrai donc lesurle composant est accessible, et si ce n'est pas le cas, nous dirigeons l'utilisateur vers lecontactcomposant.

Maintenant que vous avez configuré une garde, la prochaine chose à faire est de dire à Angular quelle route vous voulez garder. Pour nous, c'est lesurcomposant – nous ne voulons pas que quelqu'un qui n'est pas connecté ait accès ausurcomposant.

Ouvrez votre fichier de module d'application (ou n'importe quel endroit où vous avez défini des itinéraires) et remplacez le contenu par celui-ci ci-dessous :

importer {NavigateurModule} à partir de '@angular/plateforme-navigateur';
importer {NgModule} à partir de '@angular/noyau';
importer {Module routeur,Itinéraires} à partir de '@angulaire/routeur';
importer {Composant d'application} à partir de './app.composant';
importer {À propos du composant} à partir de './about/about.composant';
importer {Composant de contact} à partir de './contact/contact.composant';
importer {Service d'authentification} à partir de './auth/auth.service'
importer {AuthGuard} à partir de './auth/auth.garde'
constanteitinéraires:Itinéraires= [
  {chemin:'sur',composant:À propos du composant,peut activer:[AuthGuard]},
  {chemin:'contact',composant:Composant de contact}
];@NgModule({déclarations: [Composant d'application,À propos du composant,Composant de contact],importations: [NavigateurModule,Module routeur.forRoot(itinéraires)
  ],fournisseurs: [Service d'authentification,AuthGuard],amorcer: [Composant d'application]
})
exportation classer Module d'application { }

Ici, vous pouvez voir que nous avons mis à jour l'option CanActivate dans le chemin à propos de la route avec la garde que nous avons créée.

Maintenant, enregistrez tous les fichiers et exécutez l'application sur votre serveur de développement. Cela devrait ressembler à ceci dans le navigateur.

Emballer

Cet article vous a présenté les gardes dans le routage angulaire et les différents types qui existent. Nous avons également vu comment créer facilement la garde CanActivate et comment créer un service qui gère l'authentification. J'espère que cela a été utile. Bon piratage !