Protéger les routes Vue avec les gardes de navigation

L'authentification de la sécurité des applications Web est cruciale. Il permet une expérience personnalisée, charge le contenu spécifique à l'utilisateur (tel que l'état de connexion) et peut également être utilisé pour évaluer les autorisations afin d'empêcher les utilisateurs non autorisés d'accéder aux informations privées.

Les applications protègent généralement le contenu en plaçant du contenu sous une voie spécifique et en établissant des règles de redirection, en dirigeant les utilisateurs vers l'accès ou loin des ressources en fonction de leurs autorisations. Afin de placer de manière fiable le contenu derrière les itinéraires protégés, les pages statiques indépendantes doivent être construites. De cette façon, les règles de redirection peuvent gérer correctement la redirection.

Pour les applications à page unique (spas) construites avec des cadres frontaux modernes tels que Vue, les règles de redirection ne peuvent pas être utilisées pour protéger le routage. Étant donné que toutes les pages proviennent d'un seul fichier d'entrée, du point de vue d'un navigateur, il n'y a qu'une seule page: index.html. Dans Spa, la logique de routage provient généralement des fichiers de routage. Cet article configure principalement l'authentification ici. Nous compterons spécifiquement sur les gardes de navigation de Vue pour gérer les itinéraires spécifiques à l'authentification, car cela nous aide à accéder à des itinéraires sélectionnés avant que l'itinéraire ne soit entièrement analysé. Prévoyons comment cela fonctionne.

Bases de routage

Navigation Guard est une fonctionnalité spécifique du routeur Vue qui fournit des fonctionnalités supplémentaires sur la façon dont le routage se résout. Ils sont principalement utilisés pour gérer les états d'erreur et guider de manière transparente les utilisateurs sans interrompre brusquement leur flux de travail.

Il existe trois grandes catégories de gardes dans le routeur Vue: les gardes mondiaux, les gardes exclusifs du routeur et les gardes de composants. Comme son nom l'indique, la garde globale est appelée lors du déclenchement de toute navigation (c'est-à-dire lorsque l'URL change), la garde exclusive de l'itinéraire est appelée lors de l'appel de l'itinéraire associé (c'est-à-dire lorsque l'URL correspond à un itinéraire spécifique), et le garde des composants est appelé lors de la création, de la mise à jour ou de la destruction des composants dans l'itinéraire. Dans chaque catégorie, il existe d'autres moyens de vous donner un contrôle plus granulaire sur le routage des applications. Voici une ventilation rapide de toutes les méthodes disponibles dans chaque garde de navigation dans le routeur Vue.

Garde mondiale

• beforeEach : opération avant d'entrer dans n'importe quel itinéraire (cette portée ne peut pas être accessible)
• beforeResolve : Action avant la confirmation de navigation, mais après le garde des composants (comme avant l'enseignement, avec accès à cette portée)
• afterEach : opération après la résolution de routage (ne peut pas affecter la navigation)

Route de garde exclusive

• beforeEnter : opération avant d'entrer sur une voie spécifique (contrairement à la garde mondiale, ce gardien peut y accéder)

Gardien des composants

• beforeRouteEnter : Actions effectuées avant la confirmation de navigation et avant la création de composants (cela ne peut pas être accessible)
• beforeRouteUpdate : l'opération effectuée après avoir appelé un nouvel itinéraire en utilisant le même composant
• beforeRouteLeave : opération avant de quitter l'itinéraire

Protéger le routage

Pour les implémenter efficacement, il sera utile de savoir quand les utiliser dans un scénario donné. Par exemple, si vous souhaitez suivre les pages vues pour l'analyse, vous voudrez peut-être utiliser le Global Aftereach Guard car il est déclenché après que l'itinéraire et les composants connexes soient entièrement analysés. Si vous souhaitez prédéfinir les données dans le stockage Vuex avant l'analyse de l'itinéraire, vous pouvez utiliser la garde exclusive avant la route avant pour ce faire.

Étant donné que notre exemple traite de la protection des itinéraires spécifiques en fonction des droits d'accès aux utilisateurs, nous utiliserons des gardes de composants, c'est-à-dire avant les crochets avant. Ce gardien de navigation nous permet d'accéder à l'itinéraire correct avant que l'analyse ne soit terminée; Cela signifie que nous pouvons obtenir des données ou vérifier si les données sont chargées avant de permettre à l'utilisateur de passer. Avant de creuser dans les détails de l'implémentation de son fonctionnement, examinons brièvement la façon dont le crochet avant-poste est incorporé dans nos fichiers de routage existants. Vous trouverez ci-dessous notre échantillon de fichier de routage contenant nos itinéraires protégés, bien nommés protégés. Nous y ajouterons le crochet avant-poste comme suit:

 const Router = new Vuerouter ({{
  Routes: [
    ...
    {
      chemin: "/ protégé",
      nom: "protégé",
      Composant: import (/ * webPackChunkName: "Protected" * / './protected.vue'),
      avant enter (à, de, suivant) {
        // logique ici}
    }
  ]]
})

Structure de routage

La structure de AVANTENTER n'est pas différente des autres gardes de navigation disponibles dans le routeur Vue. Il accepte trois paramètres: to , la route "future" vers laquelle l'application navigue; from , l'itinéraire "actuel / imminent" vers lequel l'application part; next , la fonction qui doit être appelée pour que l'itinéraire résolve avec succès.

Généralement, lors de l'utilisation du routeur Vue, ensuite est appelé sans aucun argument. Cependant, cela suppose un état de réussite permanent. Dans notre cas, nous voulons nous assurer que les utilisateurs non autorisés ne sont pas en mesure d'accéder aux ressources protégées et qu'il existe d'autres chemins qui peuvent être correctement redirigés. Pour ce faire, nous passerons un paramètre à Suivant. Pour ce faire, nous utiliserons le nom de l'itinéraire pour naviguer à l'utilisateur, s'ils ne sont pas autorisés, cela ressemble à ceci:

 suivant({
  Nom: "Tableau de bord"
})

Supposons que dans notre exemple, nous avons un magasin Vuex où nous stockons le jeton d'autorisation de l'utilisateur. Pour vérifier si l'utilisateur a des autorisations, nous vérifierons ce magasin et échouerons de manière appropriée ou via l'itinéraire.

 avant enter (à, de, suivant) {
  // Vérifiez Vuex Storage //
  if (store.getters ["auth / haspermission"]) {
    suivant()
  } autre {
    suivant({
      Nom: "Dashboard" // Retour à Secure Route //
    });
  }
}

Pour s'assurer que les événements se produisent de manière synchrone et que l'itinéraire ne se charge pas prématurément jusqu'à ce que l'opération Vuex soit terminée, convertissons le garde de navigation pour utiliser Async / Await.

 asynchrone avant-neter (à, de, suivant) {
  essayer {
    var haspermission = attendre store.dispatch ("auth / haspermission");
    if (haspermission) {
      suivant()
    }
  } catch (e) {
    suivant({
      Nom: "Dashboard" // Retour à Secure Route //
    })
  }
}

Rappelez-vous la source

Jusqu'à présent, nos gardes de navigation ont atteint leur objectif de les empêcher d'accéder à des ressources protégées en redirigeant les utilisateurs non autorisés vers l'où ils pourraient provenir (c'est-à-dire les pages de tableau de bord). Même ainsi, un tel flux de travail est destructeur. Étant donné que la redirection est inattendue, l'utilisateur peut penser qu'il s'agit d'une erreur de l'utilisateur et d'essayer d'accéder à l'itinéraire à plusieurs reprises, ce qui pense finalement que l'application est corrompue. Pour résoudre ce problème, créons une méthode pour informer les utilisateurs quand et pourquoi ils sont redirigés.

Nous pouvons le faire en passant des paramètres de requête à la fonction suivante. Cela nous permet d'attacher le chemin de ressource protégé à l'URL de redirection. Donc, si vous souhaitez inciter l'utilisateur à vous connecter à l'application ou à obtenir les bonnes autorisations sans vous rappeler où il s'est arrêté, vous pouvez le faire. Nous pouvons accéder au chemin de la ressource protégée via l'objet To Route transmis à la fonction AVANTENTER, comme indiqué ci-dessous: à.fullpath.

 asynchrone avant-neter (à, de, suivant) {
  essayer {
    var haspermission = attendre store.dispatch ("auth / haspermission");
    if (haspermission) {
      suivant()
    }
  } catch (e) {
    suivant({
      Nom: "Connexion", // Retour à Secure Route //
      requête: {redirectFrom: vers.fullpath}
    })
  }
}

aviser

L'étape suivante pour améliorer le flux de travail pour que les utilisateurs n'aient pas accès aux itinéraires protégées consiste à leur envoyer des messages pour leur faire part de l'erreur et comment résoudre le problème (en se connectant ou en obtenant les autorisations correctes). Pour ce faire, nous pouvons utiliser des gardes de composants, en particulier BeforeUteenter, pour vérifier si des redirectes se sont produits. Étant donné que nous passons le chemin de redirection en tant que paramètre de requête vers notre fichier de routage, nous pouvons maintenant vérifier l'objet de routage pour voir si la redirection s'est produite.

 beFoRerouteenter (à, de, suivant) {
  if (to.query.redirectFrom) {
    // faire quelque chose //
  }
}

Comme je l'ai mentionné plus tôt, tous les gardes de navigation doivent appeler ensuite pour résoudre l'itinéraire. Comme nous l'avons vu plus tôt, l'avantage de la fonction suivante est que nous pouvons y transmettre un objet. Ce que vous ne savez peut-être pas, c'est que vous pouvez également accéder aux instances Vue dans la fonction suivante. Ouah! Voici à quoi ça ressemble:

 suivant (() => {
  console.log (this) // c'est une instance Vue})

Vous avez peut-être remarqué que lorsque vous utilisez AVANTENTER, vous n'accédez pas techniquement à cette portée. Bien que cela puisse être le cas, vous pouvez toujours accéder à l'instance Vue en passant la machine virtuelle à la fonction, comme ainsi:

 Suivant (VM => {
  console.log (VM) // Ceci est une instance Vue})

Cela est particulièrement pratique car vous pouvez désormais créer et mettre à jour correctement les propriétés de données avec des messages d'erreur pertinents sans aucune configuration supplémentaire. En utilisant cette méthode, vous obtiendrez un composant comme celui-ci:

<template><div>
    {{errormsg}}

    ...

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "对不起，您没有访问请求路由的权限"
      })
    } else {
      next()
    }
  }
}
</script>

en conclusion

Le processus d'intégration de l'authentification dans votre application peut être délicat. Nous expliquons comment empêcher les utilisateurs non autorisés d'accéder aux itinéraires et comment créer un flux de travail en fonction des autorisations d'utilisateur pour rediriger les utilisateurs vers ou loin des ressources protégées. Jusqu'à présent, notre hypothèse est que vous avez configuré l'authentification dans votre application. Si vous ne l'avez pas encore configuré et que vous souhaitez le mettre en service rapidement, je recommande fortement d'utiliser l'authentification comme service. Il existe des fournisseurs comme le widget d'authentification de Netlify ou le verrou d'authentification.

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!