Comment utiliser Vue Guard

Vue est un framework JavaScript populaire qui fournit de nombreuses fonctionnalités et options pour aider les développeurs à créer des applications Web réactives. Guard est un concept très important dans Vue. Cet article abordera les utilisations et les cas de base des gardes Vue.

Présentation de Vue Guard

Dans Vue, un garde est une fonction qui peut écouter les événements du cycle de vie des itinéraires et des composants. Lorsque ces événements sont déclenchés, les gardes peuvent effectuer des actions telles que vérifier les autorisations des utilisateurs, copier et inspecter les données entrantes, etc. Les gardes Vue sont divisés en deux catégories : les gardes globaux et les gardes de routage. La principale différence entre eux réside dans les objets qu'ils surveillent.

Global Guards

Les Global guards sont associés au cycle de vie de l'application Vue. Ils peuvent effectuer certaines opérations lorsque chaque instance de Vue est créée, détruite, mise à jour ou montée. Les gardes globaux incluent les quatre fonctions de hook suivantes :

1. beforeCreate : appelée après l'initialisation de l'instance Vue, mais avant l'observation des données et la configuration de l'événement/observateur. Cette fonction de hook est le bon moment pour initialiser les données/états au niveau du composant.
2. created : Appelé après la création de l'instance Vue. Pour le moment, l'instance du composant n'est pas montée dans le DOM. Vous pouvez effectuer certaines opérations asynchrones dans cette fonction de hook, mais il n'est pas recommandé d'y modifier les données d'état du composant.
3. beforeMount : Appelé avant que l'instance Vue ne soit montée dans l'élément DOM. À ce stade, le modèle du composant a été compilé dans une chaîne HTML, mais n'a pas encore été inséré dans le DOM.
4. Mounted : Appelé après le montage de l'instance Vue sur l'élément DOM. Vous pouvez accéder aux éléments DOM et effectuer d'autres opérations à l'intérieur de cette fonction de hook, telles que l'initialisation de plug-ins tiers, etc.

Route Guards

Les Route Guards sont des fonctions de crochet qui sont déclenchées lorsque l'application navigue vers un itinéraire spécifique. Ils peuvent surveiller l'historique d'accès aux itinéraires, vérifier si l'utilisateur est autorisé à accéder à un itinéraire spécifique, gérer le chargement de données asynchrones et d'autres opérations. Les gardes de route de Vue incluent les six fonctions de hook suivantes :

1. beforeRouteEnter : appelée avant que la route n'entre dans le composant. L'instance du composant est accessible dans cette fonction de hook, mais les données d'état et les méthodes d'instance au sein du composant ne sont pas accessibles.
2. beforeRouteUpdate : appelé lorsque l'itinéraire est mis à jour. Généralement utilisé pour gérer des opérations telles que le chargement de données asynchrones.
3. beforeRouteLeave : appelé lorsque la route quitte le composant. Vous pouvez utiliser des gardes pour valider les entrées de l'utilisateur ou alerter les utilisateurs des modifications non enregistrées.
4. beforeEach : appelé avant de naviguer vers un nouvel itinéraire. Vous pouvez vérifier les autorisations des utilisateurs, gérer le chargement de données asynchrones et d'autres opérations dans cette fonction de hook.
5. afterEach : appelé une fois la navigation terminée. Les erreurs qui se produisent pendant la navigation peuvent être gérées dans cette fonction de hook.
6. onError : Appelé lorsqu'il y a une erreur dans la navigation d'itinéraire. Les exceptions telles que l'échec de la demande et les erreurs réseau peuvent être gérées dans cette fonction de hook.

Utilisation des gardes Vue

Les gardes Vue sont très importants dans le développement réel. Ils peuvent être utilisés pour gérer la logique métier dans divers scénarios. Ci-dessous, nous utilisons un exemple pour démontrer l'utilisation de base des gardes Vue.

Supposons qu'il existe une page qui nécessite que l'utilisateur se connecte pour y accéder. Lorsque l'utilisateur n'est pas connecté, il doit être redirigé vers la page de connexion. Nous pouvons utiliser la garde beforeEach pour obtenir cette fonctionnalité. Définissez d'abord un tableau de routes :

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  }
]

Dans la configuration de routage, nous spécifions la route /profile qui nécessite une connexion pour y accéder, et la marquons comme nécessitant une authentification via des méta-informations de routage. Ensuite, ajoutez la fonction de hook beforeEach dans le fichier router.js :

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/login');   //如果需要登录并且用户未登录，则重定向到登录页面
  } else {
    next();   //否则允许导航到目标路由
  }
});

Dans la fonction de hook beforeEach, nous obtenons d'abord l'objet utilisateur actuel currentUser, puis utilisons l'attribut requireAuth pour déterminer si la route cible nécessite une connexion pour y accéder. Si une connexion est requise et que l'utilisateur actuel n'est pas connecté, redirigez vers la page de connexion. Sinon, autorisez la navigation vers l'itinéraire cible (en utilisant la méthode next() pour autoriser la navigation).

Conclusion

Vue guard est un concept très important dans le framework Vue. Il peut être utilisé pour écouter les événements du cycle de vie du routage et des composants, et effectuer certaines opérations lorsque ces événements sont déclenchés, comme la vérification des autorisations des utilisateurs, la copie. et vérifier les données entrantes, etc. Cet article présente les connaissances de base des gardes globaux et des gardes de routage, et fournit un exemple pour démontrer l'utilisation de base des gardes Vue. Il est conçu pour permettre aux développeurs de mieux comprendre et utiliser les gardes Vue, et d'utiliser pleinement leur rôle dans le développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!