Angular jwt avec spring boot

Dans ce tutoriel, nous verrons comment intégrer et utiliser Angular 8 avec Spring Boot JWT. Nous utiliserons l’exemple d’authentification JWT Spring Boot implémenté de notre tutoriel précédent. En plus de cela, une nouvelle classe de contrôleur appelée EmployeeCrudController sera ajoutée, qui contient tous les points de terminaison de repos crud.

Remarque : Le code source complet de l’exemple angular Spring boot jwt peut être téléchargé à la fin de cet article.

1. Tout d’abord, nous allons créer l’application Spring Boot Rest, avec Websecurity Config
2. Créez une application Angular avec le service HttpInterceptor
3. Enfin, nous intégrerons l’api avec l’application Angular

Commençons Spring

Boot JWT

Project

Structure Controller

Créons Employee Crud Controller, qui aura toutes les opérations brutes/points finaux de repos à invoquer par l’interface utilisateur d’Angular 8.

Configuration de la sécurité Web

Un autre changement dans ce projet est l’ajout d’une disposition pour autoriser l’appel OPTIONS dans la configuration Websecurity - .

Test

Nous pouvons tester les points de terminaison Spring Boot JWT Examplerest en suivant les étapes ci-dessous :

• Générer une requête JSON Web Token (JWT)
Créez une requête POST (localhost :8080/authenticate) et fournissez le nom d’utilisateur et le mot de passe dans le corps de la demande comme indiqué ci-dessous.
• Valider le jeton Web JSON (JWT)
Utilisez maintenant la requête GET localhost :8080/greeting avec le jeton JWT généré ci-dessus dans la demande d’en-tête.

Angular Spring Boot JWT Flow :

Angular

Changes Now va développer le projet Angular pour implémenter l’authentification JWT. Voici la structure du projet angulaire.

Pour en savoir plus sur la création d’un exemple de botte à ressort angulaire, cliquez ici

Comprenons le partie importante de l’intégration dans

le

service

d’authentification côté angulaire Dans authentication.service.ts, une fois que le nom d’utilisateur et le mot de passe saisis par l’utilisateur ont été authentifiés avec succès, nous enregistrerons le jeton Web JSON, que nous ajouterons à l’en-tête d’autorisation d’authentification JWT dans la session.

Ensuite

, nous allons modifier le service HttpInterceptor appelé BasicAuthInterceptor Service (basic-auth-interceptor.service.ts). Ce service vérifie si la session dispose d’un nom d’utilisateur et d’un jeton de chaîne légitimes, puis met à jour les en-têtes de toutes les requêtes HTTP sortantes. Nous implémentons l’intercepteur en étendant le HttpInterceptor.

Nous allons maintenant enregistrer le HTTPInterceptor généré à l’aide de app.module.ts en le mettant à jour dans la section Fournisseur.

Exécution de l’application de bout en bout

Enfin, nous sommes prêts à exécuter notre application en tant que le démarrage de printemps et l’application Angular sont en cours

d’exécution Maintenant, si vous allez sur localhost :4200, vous pouvez vous connecter en utilisant les identifiants -username ='techgeeknext' ,password='password'. L’utilisateur sera authentifié à l’aide de l’authentification de base et redirigé vers la page des employés.voir notre sortie d’intégration dans le navigateur

Télécharger le code source

Le code source complet de cet article se trouve ci-dessous.
Téléchargez-le ici - Exemple de code d’authentification JWT Spring Boot Exemple de code
d’authentification Angular 8 JWT