ANGULAR Authentification— Contrôle de l’accès vers ou depuis une route (3.0.0+)

Le routeur angular par défaut permet la navigation sans condition vers et depuis n’importe quelle route. Ce n’est pas toujours le comportement désiré.

Dans un scénario dans lequel un utilisateur peut être autorisé à naviguer sous condition vers une route, un Route Guard peut être utilisé pour la restriction.

Si votre scénario correspond à l’un des suivants, envisagez d’utiliser un Route Guard,

• L'utilisateur doit être authentifié pour accéder au composant cible.
• L’utilisateur doit être autorisé à accéder au composant cible.
• Le composant nécessite une requête asynchrone avant l’initialisation.
• Le composant requiert la saisie de l’utilisateur avant de pouvoir quitter.

Comment fonctionne Route Guards

Route Guards fonctionne en renvoyant une valeur booléenne pour contrôler le comportement de la navigation du routeur. Si true(vrai) est renvoyé, le routeur poursuivra la navigation vers le composant cible. Si false(faux) est renvoyé, le routeur refusera la navigation vers composant cible.

Interfaces route Guard

Le routeur prend en charge plusieurs interfaces de guard:

• CanActivate: se produit entre les routes de navigation.
• CanActivateChild: se produit entre la navigation d’une route vers une route enfant.
• CanDeactivate: se produit lorsque l’on quitte la route actuel.
• CanLoad: se produit entre les routes de navigation vers un module de fonctionnalité chargé de manière asynchrone.
• Resolve : utilisé pour récupérer les données avant l’activation de la route.

Ces interfaces peuvent être implémentées dans votre guard pour accorder ou supprimer l’accès à certains processus de la navigation.

Guards de route synchrones ou asynchrones

Route Guards permet aux opérations synchrones et asynchrones de contrôler de manière conditionnelle la navigation.

Guard de route synchrone

Un guard de route synchrone renvoie un booléen, par exemple en calculant un résultat immédiat, afin de contrôler la navigation.

Guard de route asynchrone

Pour un comportement plus complexe, un protecteur de route peut bloquer la navigation de manière asynchrone. Un guard de route asynchrone peut
renvoyer un observable ou une promesse.
Ceci est utile pour des situations telles que l’attente d’une entrée d’utilisateur pour répondre à une question, l’attente de la sauvegarde des modifications apportées à serveur, ou en attente de recevoir des données extraites d’un serveur distant.

Ajouter un guard à la configuration de la route

Fichier app.routes

CanActivate a lié les routes protégées à Guard

Exporter le APP_ROUTER_PROVIDERS à utiliser dans le bootstrap de l’application

Utilisation de resolvers et de guards

Nous utilisons une protection de niveau supérieur dans notre configuration de route pour intercepter l’utilisateur actuel lors du chargement de la première page et un resolver pour stocker la valeur de currentUser, qui est notre utilisateur authentifié à partir du backend.

Une version simplifiée de notre implémentation se présente comme suit:

Voici notre route de premier niveau:

Voici notre AuthService

Voici notre AuthGuard:

Voici notre CurrentUserResolver:

Utiliser Guard dans app bootstrap

Fichier main.ts

Considérez les exemples ci-dessus:

1. Créez le guard et
2. Ajouter le guard à la configuration de la route (où le guard est configuré pour la route, puis APP_ROUTER_PROVIDERS est exporté),
   nous pouvons coupler le bootstrap à Guard comme suit

Bootstrapping

Maintenant que les routes sont définies, nous devons informer notre application de ces routes. Pour ce faire, amorcez le provider que nous avons exporté dans l’exemple précédent.
Trouvez votre configuration de démarrage (devrait être dans main.ts, mais votre kilométrage peut varier).

Configuration de router-outlet

Maintenant que le routeur est configuré et que notre application sait comment gérer les routes, nous devons montrer le composant que nous avons configurés.
Pour ce faire, configurez votre template/fichier HTML pour votre composant (app) de niveau supérieur de la manière suivante:

L’élément <router-outlet> </router-outlet> changera le contenu en fonction de la route. Un autre bon aspect à propos de cet élément est qu’il ne doit pas nécessairement être le seul élément de votre code HTML.

Par exemple: disons que vous vouliez une barre d’outils sur chaque page qui reste constante entre les routes, de la même manière que Stack Overflow. Vous pouvez imbriquer le <routeur-outlet> sous des éléments de sorte que seules certaines parties de la page changement.

Modification des routes (à l’aide de templates et de directives)

Maintenant que les routes sont configurées, nous avons besoin d’un moyen de les modifier réellement.
Cet exemple montrera comment modifier des routes à l’aide du template, mais il est possible de modifier des routes dans TypeScript.

Voici un exemple (sans binding):

<a routerLink=”/home”>Home</a>

Si l’utilisateur clique sur ce lien, il se dirigera vers /home. Le routeur sait comment gérer /home, donc il affichera le message Home Composant.
Voici un exemple avec la liaison de données:

<a *ngFor=”let link of links” [routerLink]=”link”>{{link}}</a>

Ce qui nécessiterait l’existence d’un tableau appelé links, ajoutez ceci à app.ts:

public links[] = [‘home’, ‘login’]

Cela va parcourir le tableau et ajouter un élément <a> avec la directive routerLink = la valeur de l’élément courant dans le tableau, créant ceci:

<a routerLink=”home”>home</a>

<a routerLink=”login”>login</a>

Ceci est particulièrement utile si vous avez beaucoup de liens, ou peut-être que les liens doivent être constamment modifiés. Nous laissons Angular gérer le travail fastidieux de l’ajout de liens en lui fournissant simplement les informations nécessaires.

À l’heure actuelle, links [] est statique, mais il est possible de lui fournir des données provenant d’une autre source.

Définir les routes

Pour utiliser le routeur, définissez les routes dans un nouveau fichier TypeScript tel que :

Dans la première ligne, nous importons providerRouter afin de permettre à notre application de connaître les routes en cours de phase d’amorçage.

Accueil et Profil ne sont que deux composants à titre d’exemple. Vous devrez importer chaque composant dont vous avez besoin en tant que route.

Ensuite, exportez le tableau des routes.

path: le chemin du composant. VOUS N’AVEZ PAS BESOIN D’UTILISER ‘/ ……..’ Angular le fera automatiquement
component: composant à charger lors de l’accès à la route
redirectTo: facultatif. Si vous devez rediriger automatiquement un utilisateur lorsqu’il accède à un route particulière, indiquez-le.

Enfin, nous exportons le routeur configuré. providerRouter renverra un provider que nous pourrons booster afin que notre L’application sait gérer chaque route.