CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Implémentation des Navigation Guards dans Vue.js

Implémentation des Navigation Guards dans Vue.js

Indicateurs de navigation - Vue Router Navigation Guards
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Vue JS 3
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
69,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
69,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les différents types de Navigation Guards

Objectifs

Les objectifs de cette vidéo sont les suivants :

  • Comprendre les différents types de Navigation Guards dans Vue.js.
  • Savoir implémenter des guards globaux, par route et par composant.
  • Apprendre à contrôler le flux de navigation selon les règles définies.

Résumé

Les Navigation Guards dans Vue.js permettent de gérer les autorisations de contenu en fonction des utilisateurs avec des moments précis d'exécution dans une application SPA.

Description

Les Navigation Guards permettent d'exécuter du code lors des changements de route dans une application Vue.js. Vous pouvez les utiliser pour restreindre l'accès à certains contenus en fonction de l'état de connexion de l'utilisateur.

Il existe trois types de Navigation Guards :

  • Globaux : exécutés à chaque changement de route.
  • Par route : appliqués à des routes spécifiques.
  • Par composant : appliqués à des composants individuels.

Par exemple, un guard beforeEach peut être utilisé pour vérifier si un utilisateur est authentifié avant d'accéder à une route privée. Dans le cas contraire, la navigation peut être annulée ou redirigée. Vous pouvez implémenter ces guards après avoir configuré le routeur Vue.js, en utilisant les méthodes router.beforeEach et router.afterEach. Chaque guard reçoit trois paramètres : to (la route de destination), from (la route d'origine) et next (une fonction qui doit être appelée pour poursuivre ou interrompre la navigation).

Enfin, pour des contrôles plus granulaires, vous pouvez définir des guards directement dans les composants avec les méthodes beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave.

Voir plus

Questions fréquentes

Qu'est-ce qu'un Navigation Guard dans Vue.js?
Un Navigation Guard est une fonction qui permet d'exécuter du code lors des transitions de route dans une application Vue.js. Il est utilisé pour des tâches comme la vérification des permissions d'utilisateur ou l'annulation de la navigation sous certaines conditions.
Quels sont les trois types de Navigation Guards disponibles dans Vue.js?
Les trois types de Navigation Guards disponibles dans Vue.js sont : globaux, par route, et par composant. Les globaux s'appliquent à toutes les routes, les par route s'appliquent à des routes spécifiques, et les par composant s'appliquent à des composants individuels.
Comment annuler une navigation dans un Navigation Guard?
Pour annuler une navigation dans un Navigation Guard, vous pouvez appeler la fonction next avec le paramètre false. Cela empêche la navigation vers la route de destination.

Programme détaillé