Angular2 jwt

Tutoriel construit avec  Angular 5.2.11

Autres versions disponibles :

• Angular : Angular 14, 10, 9, 8, 7, 6
• React : React 18 + Redux, React + Recoil, React 16 + Redux, React + RxJS
• Vue : Vue 3 + Pinia, Vue.js + Vuex
• Next.js : Next.js 11
• AngularJS : AngularJS
• ASP.NET Core : Blazor WebAssembly

Voici un exemple personnalisé de configuration d’une page de connexion simple à l’aide d’Angular 2/5 et de l’authentification JWT.

Le projet est disponible sur GitHub à l’adresse https ://github.com/cornflourblue/angular2-jwt-authentication-example.

Le

voici en action :(Voir sur StackBlitz à https://stackblitz.com/edit/angular-2-5-jwt-authentication-example)

Exécution de l’exemple de connexion Angular 2/5 JWT Installez localement

1. NodeJS et NPM à partir de https ://nodejs.org/en/download/.
2. Téléchargez le code source du projet à partir de https ://github.com/cornflourblue/angular2-jwt-authentication-example
3. Installez tous les packages npm requis en les exécutant à partir de la ligne de commande dans le dossier racine du projet (où se trouve le package.json).
4. Démarrez l’application en l’exécutant à partir de la ligne de commande dans le dossier racine du projet.

Structure du projet Angular 2/5

J'ai utilisé le projet de démarrage rapide Angular 2 comme base pour l'application, il est écrit en TypeScript et utilise systemjs pour Chargement des modules. Si vous êtes nouveau sur angular 2, je vous recommande de consulter le guide de démarrage rapide car il fournit des détails sur les outils du projet et les fichiers de configuration qui ne sont pas couverts dans cet article.

La structure du projet et du code suit principalement les recommandations du guide de style officiel d’Angular 2, avec mes propres ajustements ici et là.

Chaque fonctionnalité a son propre dossier (home & login), les autres codes tels que les services, les modèles, les gardes, etc. sont placés dans des dossiers préfixés d'un trait de soulignement pour les différencier facilement et les regrouper en haut de la structure des dossiers.

Voici la structure du projet :

Vous trouverez ci-dessous de brèves descriptions et le code des fichiers principaux de l'application exemple, tous les fichiers sont disponibles dans le projet github lié en haut de l'article.

 

Garde

d’authentification angulaire 2/5 Chemin : /app/_guards/auth.guard.ts

La garde d'authentification est utilisée pour empêcher les utilisateurs non authentifiés d'accéder aux routes restreintes, elle est utilisée dans app.routing.ts pour protéger la route de la page d'accueil. Pour plus d’informations sur les gardes angulaires 2, vous pouvez consulter cet article sur le blog thoughtram.

Chemin d’accès

 

du

faux fournisseur de backend Angular 2/5

: /app/_helpers/fake-backend.ts

Le faux fournisseur de backend permet à l’exemple de s’exécuter sans backend / backendless, je l’ai créé pour pouvoir concentrer l’exemple et le tutoriel uniquement sur le code d’angular 2, et aussi pour qu’il fonctionne sur StackBlitz.

Il est implémenté à l'aide de la classe HttpInterceptor qui a été introduite dans Angular 4.3 dans le cadre du nouveau HttpClientModule. En étendant la classe HttpInterceptor, vous pouvez créer un intercepteur personnalisé pour modifier http demandes avant qu’elles ne soient envoyées au serveur. Dans ce cas, le FakeBackendInterceptor intercepte certaines requêtes en fonction de leur URL et fournit une fausse réponse au lieu d’aller sur le serveur.

Chemin d’accès à l’intercepteur

 

JWT Angular 2/5

: /app/_helpers/jwt.interceptor.ts

L’intercepteur JWT intercepte les requêtes http de l’application pour ajouter un jeton d’authentification JWT à l’en-tête Authorization si l’utilisateur est connecté.

Il est implémenté à l'aide de la classe HttpInterceptor qui a été introduite dans Angular 4.3 dans le cadre du nouveau HttpClientModule. En étendant la classe HttpInterceptor, vous pouvez créer un intercepteur personnalisé pour modifier les requêtes HTTP avant qu’elles ne soient envoyées au serveur.

Les intercepteurs HTTP sont ajoutés au pipeline de requêtes dans la section des fournisseurs du fichier app.module.ts.

Retour en haut de la page

 

Chemin d’accès au modèle utilisateur Angular 2/5

: /app/_models/user.ts

Le modèle utilisateur est une petite classe qui définit les propriétés d’un utilisateur.

Chemin d’accès

 

du

service d’authentification Angular 2/5 JWT

: /app/_services/authentication.service.ts

Le service d’authentification est utilisé pour se connecter et se déconnecter de l’application, pour se connecter, il publie les informations d’identification de l’utilisateur sur l’API et vérifie la réponse pour un jeton JWT, s’il y en a un, cela signifie que l’authentification a réussi afin que les détails de l’utilisateur, y compris le jeton, soient ajoutés au stockage local.

Les détails de l’utilisateur connecté sont stockés dans le stockage local, de sorte que l’utilisateur reste connecté s’il actualise le navigateur et entre les sessions du navigateur jusqu’à ce qu’il se déconnecte. Si vous ne souhaitez pas que l'utilisateur reste connecté entre les deux Actualisations ou sessions Le comportement peut facilement être modifié en stockant les détails de l’utilisateur dans un endroit moins persistant, tel que le stockage de session ou dans une propriété du service d’authentification.

Chemin d’accès au service

 

utilisateur Angular 2/5

: /app/_services/user.service.ts

Le service utilisateur contient une méthode pour obtenir tous les utilisateurs de l’api, je l’ai incluse pour démontrer l’accès à un point de terminaison d’api sécurisé avec l’en-tête d’autorisation http défini après la connexion à l’application, l’en-tête d’authentification est défini avec un jeton JWT avec l’intercepteur JWT ci-dessus. Le point de terminaison sécurisé dans l’exemple est un faux point implémenté dans le faux fournisseur de backend ci-dessus.

Angular 2/5 Home Component

Template Chemin d’accès

 

: /app/home/home.component.html

La maison Le modèle de composant contient la syntaxe HTML et Angular 2 pour l’affichage d’un simple message de bienvenue, d’une liste d’utilisateurs et d’un lien de déconnexion.

Chemin d'accès du

 

composant d'accueil d'Angular 2/5

: /app/home/home.component.ts

Le composant d'accueil définit un composant d'angle 2 qui récupère tous les utilisateurs du service d'utilisateur et les met à la disposition du modèle via la propriété 'users'.

Chemin d’accès

 

du

composant de connexion Angular 2/5

: /app/login/login.component.html

Le modèle de composant de connexion contient un formulaire de connexion avec des champs de nom d’utilisateur et de mot de passe. Il affiche des messages de validation pour les champs non valides lorsque vous cliquez sur le bouton Envoyer. Lors de l’envoi du formulaire, la méthode login() est appelée.

Retour en haut de la page

 

Chemin d’accès au composant de connexion Angular 2/5

: /app/login/login.component.ts

Le composant de connexion utilise le service d’authentification pour se connecter et se déconnecter de l’application. Il déconnecte automatiquement l’utilisateur lors de son initialisation (ngOnInit), de sorte que la page de connexion peut également être utilisée pour se déconnecter.

Chemin d’accès

 

du

modèle de composant d’application Angular 2/5

: /app/app.component.html

Le modèle de composant d’application est le modèle de composant racine de l’application, il contient une directive router-outlet pour afficher le contenu de chaque vue en fonction de l’itinéraire / chemin actuel.

Chemin d’accès

 

du

composant d’application Angular 2/5

: /app/app.component.ts

Le composant d’application est le composant racine de l’élément application, il définit la balise racine de l’application comme <app></app> avec la propriété selector.

La propriété moduleId est définie pour permettre l’utilisation d’un chemin d’accès relatif pour le templateUrl.

Chemin d’accès

 

du

module d’application Angular 2/5

: /app/app.module.ts

Le module d’application définit le module racine de l’application ainsi que les métadonnées relatives au module. Pour plus d’informations sur les modules angular 2, consultez cette page sur le site officiel de la documentation.

C’est là que le faux fournisseur de backend est ajouté à l’application, pour passer à un vrai backend il suffit de supprimer les fournisseurs situés sous le commentaire « // fournisseurs utilisés pour créer un faux backend ».

Chemin d’acheminement de l’application

 

Angular 2/5

: /app/app.routing.ts

Le Le fichier de routage de l’application définit les itinéraires de l’application, chaque itinéraire contient un chemin d’accès et un composant associé. La route d’accueil est sécurisée en passant l’AuthGuard à la propriété canActivate de la route.

Chemin d’accès

au

fichier principal (Bootstrap) d’Angular

 

2/5

: /app/main.ts

Le fichier principal est le point d’entrée utilisé par angular pour lancer et amorcer l’application.

Besoin d’aide pour