Développeur front-end basé à Lagos, au Nigeria. Il aime convertir des conceptions en code et créer des choses pour le Web. En savoir plus sur Timi …
Dans ce tutoriel, nous apprendrons comment faire une demande dans nos applications Nuxt.js en utilisant le module Axios. Nous apprendrons également à utiliser les méthodes ayncData et fetch pour extraire des données côté serveur à l'aide d'Axios et les différences entre les deux méthodes. Enfin, nous apprendrons comment ajouter une authentification à notre application à l'aide du module Auth.
Nuxt.js fournit un module Axios pour une intégration facile avec votre application. Axios est un client HTTP basé sur les promesses qui fonctionne dans le navigateur et l'environnement Node.js ou, en termes plus simples, c'est un outil pour effectuer des requêtes (par exemple des appels API) dans les applications côté client et l'environnement Node.js.
Dans ce tutoriel, nous allons apprendre à utiliser le module Axios et à faire une requête côté serveur en utilisant asyncData et à récupérer. Ces deux méthodes font une demande côté serveur mais elles ont des différences que nous allons également couvrir. Enfin, nous apprendrons à effectuer l'authentification et à sécuriser les pages / itinéraires à l'aide du module d'authentification et du middleware d'authentification.
Cet article requiert des connaissances de base de Nuxtjs et Vuejs, car nous allons construire en plus de cela. Pour ceux qui n'ont aucune expérience avec Vuejs, je vous recommande de commencer à partir de leur documentation officielle et de la page officielle de Nuxt avant de poursuivre avec cet article.
Qu'est-ce que le module Nuxt.js Axios?
Selon la documentation officielle
"Il s'agit d'une intégration Axios sûre et facile avec Nuxt.js."
Voici certaines de ses fonctionnalités:
Définit automatiquement l'URL de base côté client et côté serveur.
En-têtes de demande de proxy dans SSR (utile pour l'authentification).
Récupération des demandes de style.
Intégré à Nuxt.js Progressbar lors de la création de demandes.
Pour utiliser les axios dans votre application, vous devez d'abord l'installer en utilisant soit npm ou fil .
FILS
fil ajouté @ nuxtjs / axios
NPM
npm install @ nuxtjs / axios
Ajoutez-le à votre nuxt.config.js fichier:
modules: [
'@nuxtjs/axios',
] ,
axios: {
// config supplémentaire par exemple
// BaseURL: 'https: // lien vers API'
}
Le tableau de modules accepte une liste de modules Nuxt.js tels que dotenv, auth et dans ce cas, Axios. Ce que nous avons fait, c'est d'informer notre application que nous utiliserions le module Axios, que nous référençons en utilisant @ nuxtjs / axios . Elle est ensuite suivie de la propriété axios qui est un objet de configurations comme baseURL pour le côté client et le côté serveur.
Vous pouvez désormais accéder à Axios de n'importe où dans votre application en appelant this. $ Axios.method or this. $ Axios. $ Method . Où méthode peut être obtenir poster ou supprimer .
Faire votre première demande à l'aide d'Axios
Pour ce didacticiel , J'ai monté une application simple sur Github . Le référentiel contient deux dossiers, début et fin, le dossier start contient tout ce dont vous avez besoin pour accéder directement au didacticiel. Le dossier finish contient une version complète de ce que nous allons construire.
Après avoir cloné le référentiel et ouvert le dossier start nous devons installer tous nos packages dans le package.json ouvrez donc votre terminal et exécutez la commande suivante:
npm install
Une fois cela fait, nous pouvons démarrer notre application à l'aide de la commande npm run dev . Voici ce que vous devriez voir lorsque vous accédez à localhost: 3000 .
Page de destination de notre application. ( Grand aperçu )
La prochaine chose que nous devons faire est de créer un fichier .env dans le dossier racine de notre application et d'y ajouter notre URL API. Pour ce didacticiel, nous utiliserons un exemple d'API conçu pour collecter les rapports des utilisateurs.
De cette façon, nous n'avons pas pour coder en dur notre API dans notre application, ce qui est utile pour travailler avec deux API (développement et production).
L'étape suivante serait d'ouvrir notre fichier nuxt.config.js et d'ajouter la variable d'environnement à notre configuration axios que nous avons ajoutée ci-dessus.
Ici, nous demandons à Nuxt.js d'utiliser cette baseURL à la fois pour nos clients côté et côté serveur demandes chaque fois que nous utilisons cet Axios
Maintenant, pour récupérer une liste de rapports, ouvrons le fichier index.vue et ajoutons la méthode suivante à la section de script.
Ce que nous avons fait est de créer une fonction asynchrone que nous appelons getIncidents () et nous pouvons dire ce qu'il fait à partir du nom – il récupère une liste d'incidents en utilisant la méthode d'action Vuex store this. $ Store.dispatch . Nous affectons la réponse de cette action à notre propriété d'incidents afin de pouvoir l'utiliser dans le composant.
Nous voulons appeler la méthode getIncidents () chaque fois que le composant monte. Nous pouvons le faire en utilisant le crochet monté .
monté () {
this.getIncidents ()
}
monté () est un crochet de cycle de vie qui est appelé lorsque le composant est monté. Cela entraînera l'appel à l'API lors du montage du composant. Maintenant, allons dans notre fichier index.js dans notre magasin et créons cette action à partir de laquelle nous ferons notre demande Axios.
Ici, nous avons créé l'action appelée getIncidents qui est une fonction asynchrone, puis nous attendons une réponse du serveur et renvoyons cette réponse. La réponse de cette action est renvoyée à notre méthode getIncidents () dans notre fichier index.vue .
Si nous actualisons notre application, nous devrions maintenant pouvoir voir un longue liste des incidents rendus sur la page.
Liste des incidents sur la page de destination. ( Grand aperçu )
Nous avons fait notre première demande en utilisant Axios mais nous ne nous arrêterons pas là, nous allons essayer asyncData et fetch ] pour voir les différences entre eux et l'utilisation d'Axios.
AsyncData
AsyncData récupère les données côté serveur et il est appelé avant de charger le composant de page. Il n'a pas accès à ce car il est appelé avant la création de vos données de composant de page. ce n'est disponible qu'après que le crochet créé a été appelé afin que Nuxt.js fusionne automatiquement les données renvoyées dans les données du composant.
L'utilisation de asyncData est bonne pour le référencement, car il récupère le contenu de votre site côté serveur et aide également à charger le contenu plus rapidement.
Notez que la méthode asyncData ne peut être utilisée que dans le dossier pages de votre application car elle ne fonctionnerait pas dans le dossier des composants. En effet, le crochet asyncData est appelé avant la création de votre composant.
Ajoutons asyncData à notre fichier index.vue et observons à quelle vitesse nos données d'incidents données ] charges. Ajoutez le code suivant après notre propriété composants et supprimons notre crochet monté.
Ici, la méthode asyncData accepte une propriété de le contexte $ axios . Nous utilisons cette propriété pour récupérer la liste des incidents et la valeur est ensuite renvoyée. Cette valeur est automatiquement injectée dans notre composant. Maintenant, vous pouvez remarquer la vitesse à laquelle votre contenu se charge si vous actualisez la page et à aucun moment il n'y a aucun incident à rendre.
Fetch
La méthode Fetch est également utilisée pour effectuer des requêtes sur le du côté serveur. Il est appelé après le hook créé dans le cycle de vie, ce qui signifie qu'il a accès aux données du composant. Contrairement à la méthode asyncData la méthode fetch peut être utilisée dans tous les fichiers .vue et être utilisée avec le magasin Vuex. Cela signifie que si vous disposez des éléments suivants dans votre fonction de données:
Vous pouvez facilement modifier id ou sexe en appelant this.id ou this.gender .
Utilisation d'Axios En tant que plugin
Pendant le processus de développement avec Axios, vous pourriez constater que vous avez besoin d'une configuration supplémentaire comme la création d'instances et d'intercepteurs pour votre demande afin que votre application puisse fonctionner comme prévu et heureusement, nous pouvons le faire en étendant notre Axios dans un
Pour étendre axios vous devez créer un plugin (par exemple axios.js ) dans votre dossier plugins .
exporter la fonction par défaut ({
$ axios,
boutique,
réorienter
}) {
$ axios.onError (erreur => {
if (error.response && error.response.status === 500) {
rediriger ('/ login')
}
})
$ axios.interceptors.response.use (
réponse => {
if (response.status === 200) {
if (response.request.responseURL && response.request.responseURL.includes ('login')) {
store.dispatch ("setUser", réponse);
}
}
réponse de retour
}
)
}
Ceci est un exemple de plugin que j'ai écrit pour une application Nuxt. Ici, votre fonction prend dans un objet de contexte de $ axios store et redirigez que nous utiliserions pour configurer le plug-in. La première chose que nous faisons est d'écouter une erreur avec un état de 500 en utilisant $ axios.onError et de rediriger l'utilisateur vers la page de connexion.
Nous avons également un intercepteur qui intercepte chaque réponse de demande que nous faisons dans nos vérifications d'application si l'état de la réponse que nous obtenons est 200 . Si tel est le cas, nous procédons et vérifions qu'il existe un response.request.responseURL et s'il comprend une connexion. Si cela s'avère vrai, nous envoyons ensuite cette réponse en utilisant la méthode d'expédition de notre magasin où elle a ensuite muté dans notre état.
Ajoutez ce plugin à votre nuxt.config.js fichier:
plugins: [
'~/plugins/axios'
]
Après avoir fait cela, votre plugin Axios intercepterait toute demande que vous feriez et vérifierait si vous avez défini un cas spécial pour cela.
Introduction au module Auth
Le module auth est utilisé pour l'authentification de votre application Nuxt et est accessible depuis n'importe où dans votre application en utilisant $ this.auth . Il est également disponible dans fetch asyncData middleware et NuxtInitServer à partir de l'objet contextuel $ auth .
Le contexte fournit des objets / paramètres supplémentaires de Nuxt aux composants Vue et est disponible dans des zones de cycle de vie nuxt spéciales comme celles mentionnées ci-dessus.
Pour utiliser le module d'authentification dans votre application, vous devez installez-le en utilisant le fil ou npm .
La propriété auth accepte une liste de propriétés telles que stratégies et redirection . Ici, les stratégies acceptent votre méthode d'authentification préférée qui peut être:
locale Pour le flux de nom d'utilisateur / e-mail et de mot de passe.
facebook Pour utiliser les comptes Facebook comme un moyen d'authentification.
Github Pour authentifier les utilisateurs avec des comptes Github.
Google Pour authentifier les utilisateurs avec des comptes Google.
Auth0
Laravel Passport [19659095] La propriété de redirection accepte un objet de liens pour:
connexion Les utilisateurs seraient redirigés vers ce lien si une connexion est requise.
déconnexion Les utilisateurs seraient redirigés ici si après déconnexion, l'itinéraire actuel est protégé.
home Les utilisateurs seraient redirigés ici après la connexion.
Maintenant, ajoutons ce qui suit à notre nuxt.config.js fichier.
Veuillez noter que la méthode auth fonctionne mieux lorsqu'il y a un point d'extrémité utilisateur fourni dans l'option ci-dessus.
À l'intérieur du objet de configuration auth nous avons une option de redirection dans laquelle nous définissons notre route de connexion sur / connexion déconnexion route vers / et retour à la maison vers / mes-rapports qui se comportaient tous comme prévu. Nous avons également une propriété tokenType qui représente le type d'autorisation dans l'en-tête de notre demande Axios. Il est défini sur Bearer par défaut et peut être modifié pour fonctionner avec votre API.
Pour notre API, il n'y a pas de type de jeton et c'est pourquoi nous allons le laisser comme chaîne vide . Le tokenName représente le nom de l'autorisation (ou la propriété d'en-tête à laquelle vous souhaitez attacher votre jeton) à l'intérieur de votre en-tête dans votre demande Axios.
Par défaut, il est défini sur Autorisation mais pour notre API, le nom de l'autorisation est x-auth . La propriété autoFetchUser est utilisée pour activer l'objet d'extraction utilisateur à l'aide de la propriété de point de terminaison utilisateur après la connexion. Il est vrai par défaut, mais notre API n'a pas de point de terminaison utilisateur nous avons donc défini ce paramètre sur faux .
Pour ce didacticiel, nous serions en utilisant la stratégie locale. Dans nos stratégies, nous avons l'option locale avec des points de terminaison pour la connexion, l'utilisateur et la déconnexion, mais dans notre cas, nous n'utiliserions que l'option * login * car notre API de démonstration n'a pas de déconnexion * * point de terminaison et notre objet utilisateur est renvoyé lorsque * connexion * réussie.
Remarque: Le module auth n'a pas de registre option de point de terminaison, ce qui signifie que nous allons enregistrer la manière traditionnelle et rediriger l'utilisateur vers la page de connexion où nous effectuerons l'authentification en utilisant this. $ auth.loginWith . Il s'agit de la méthode utilisée pour authentifier vos utilisateurs. Il accepte une «stratégie» (par exemple locale ) comme premier argument puis un objet pour effectuer cette authentification. Jetez un œil à l'exemple suivant:
let data {
e-mail: 'test@test.com',
mot de passe: '123456'
}
this. $ auth.loginWith ('local', {data})
Utilisation du module d'authentification
Maintenant que nous avons configuré notre module d'authentification, nous pouvons passer à notre page d'enregistrement. Si vous visitez la page / enregistrer vous devriez voir un formulaire d'inscription.
Ici, nous avons une fonction asynchrone appelée registerUser qui est liée à un événement click dans notre modèle et crée une requête Axios enveloppée dans un bloc try / catch à un noeud final / user / create . Ceci redirige vers la page / login et informe l'utilisateur d'une inscription réussie. Nous avons également un bloc catch qui avertit l'utilisateur de toute erreur si la demande échoue.
Si l'enregistrement réussit, vous serez redirigé vers la page de connexion.
Page de connexion avec composant de notification. ( Grand aperçu )
Ici, nous allons utiliser cette méthode d'authentification . $ Auth.loginWith ('local', loginData) après quoi nous utiliserions this. $ auth.setUser (userObj) pour définir l'utilisateur dans notre instance auth .
Pour que la page de connexion fonctionne, ajoutons le code suivant à notre fichier login.vue .
Nous avons créé une fonction asynchrone appelée logIn en utilisant la méthode auth this. $ Auth.loginWith ('local, loginData) . Si cette tentative de connexion réussit, nous attribuons ensuite les données utilisateur à notre instance d'authentification à l'aide de this. $ Auth.setUser (userInfo) et redirige l'utilisateur vers la page / my-report .
Vous pouvez maintenant obtenir des données utilisateur en utilisant ceci. $ Auth.user ou avec Vuex en utilisant ceci. $ Store.state.auth.user mais ce n'est pas tout. L'instance auth contient d'autres propriétés que vous pouvez voir si vous vous connectez ou vérifiez votre état à l'aide de vos outils de développement Vue.
Si vous vous connectez ceci. $ Store.state.auth à la console, vous verrez ceci:
L'instance auth contient une propriété connectedIn qui est utile pour basculer entre les liens authentifiés dans la section nav / header de votre application. Il contient également une méthode de stratégie qui indique le type de stratégie que l'instance exécute (par exemple local).
Maintenant, nous allons utiliser cette propriété connectedIn pour organiser notre nav liens. Mettez à jour votre composant navBar comme suit:
Dans notre section de modèle, nous avons plusieurs liens vers différentes parties de l'application dans lesquelles nous utilisons maintenant auth.loggedIn pour afficher les liens appropriés en fonction de l'état d'authentification. Nous avons un bouton de déconnexion qui a un événement cliquez sur avec une fonction logOut () qui lui est attachée. Nous affichons également l'e-mail de l'utilisateur obtenu à partir de la propriété auth accessible à partir de notre magasin Vuex en utilisant la méthode mapState qui mappe notre état auth à la propriété calculée du composant nav. Nous avons également une méthode de déconnexion qui appelle notre action Vuex logOut et redirige l'utilisateur vers la page de connexion .
Maintenant, allons-y et mettons à jour notre magasin doit avoir une action logOut .
L'action logOut appelle la méthode auth logout qui efface les données utilisateur, supprime les jetons de localStorage et définit logIn sur
sur false .
Des itinéraires comme / mes-rapports et rapport-incident ne devraient pas être visibles par les invités mais à ce stade de notre application, ce n'est pas le cas. Nuxt n'a pas de garde de navigation qui peut protéger vos itinéraires, mais c'est le auth middleware . Il vous donne la liberté de créer votre propre middleware afin que vous puissiez le configurer pour qu'il fonctionne comme vous le souhaitez.
Il peut être défini de deux manières:
Par itinéraire.
Globalement pour l'ensemble de l'application dans votre fichier nuxt.config.js .
routeur: {
middleware: ['auth']
}
Ce middleware auth fonctionne avec votre instance auth de sorte que vous n'avez pas besoin de créer un fichier auth.js dans votre dossier middleware.
Ajoutons maintenant ce middleware à nos fichiers my-reports.vue et report-incident.vue . Ajoutez les lignes de code suivantes à la section de script de chaque fichier.
middleware: 'auth'
Maintenant, notre application vérifierait si l'utilisateur essayant d'accéder à ces routes a un auth.loggedIn valeur de true . Il les redirigera vers la page de connexion en utilisant notre option de redirection dans notre fichier de configuration auth - si vous n'êtes pas connecté et que vous essayez de visiter soit / my- rapport ou rapport-incident vous serez redirigé vers / login .
Si vous allez dans / report-incidents voici ce que vous devriez voir.
Cette page sert à ajouter des incidents mais pour le moment le formulaire n'envoie pas incident à notre serveur car nous n'appelons pas le serveur lorsque le l'utilisateur tente de soumettre le formulaire. Pour résoudre ce problème, nous ajouterons une méthode reportIncident qui sera appelée lorsque l'utilisateur cliquera sur Report . Nous l’avons dans la section script du composant. Cette méthode enverra les données du formulaire au serveur.
Mettez à jour votre fichier report-incident.vue avec ce qui suit:
Ici, nous avons un formulaire avec des champs de saisie pour le titre, l'emplacement et le commentaire avec une liaison de données bidirectionnelle en utilisant le modèle v . Nous avons également un bouton soumettre avec un événement de clic. Dans la section script, nous avons une méthode reportIncident qui collecte toutes les informations fournies dans le formulaire et est envoyée à notre serveur à l'aide de FormData car l'API est conçue pour accepter également des images et des vidéos .
Ce formData est attaché à une action Vuex en utilisant la méthode de répartition, si la demande aboutit, vous êtes redirigé vers / mes-rapports avec une notification vous informant que ce la demande a abouti sinon, vous serez averti d'une erreur avec le message d'erreur.
À ce stade, nous n'avons pas d'action reportIncident dans notre magasin, donc dans la console de votre navigateur, vous verrez une erreur si vous essayez de cliquer sur Soumettre sur cette page.
Pour résoudre ce problème, ajoutez l'action reportIncident à votre fichier index.js .
exporter des actions const = {
// ...
rapport asynchroneIncident ({}, données) {
laissez res = attendre cela. $ axios.post ('/ incident / create', données)
return res;
}
}
Ici, nous avons une fonction reportIncident qui prend dans un objet de contexte vide et les données que nous envoyons à partir de notre formulaire. Ces données sont ensuite jointes à une demande après qui crée un incident et renvoie à notre fichier report-incident.vue .
À ce stade, vous devriez être en mesure d'ajouter un rapport utilisant le formulaire après lequel vous serez redirigé vers la page / mes-rapports .
Cette page devrait afficher une liste des incidents créés par l'utilisateur, mais pour le moment elle ne montre que ce que nous voyons ci-dessus, allons de l'avant pour y remédier.
Nous allons d'utiliser la méthode fetch nous avons appris à obtenir cette liste. Mettez à jour votre fichier my-reports.vue avec ce qui suit:
Ici, nous utilisons la méthode fetch pour obtenir des incidents spécifiques à l'utilisateur et affecter la réponse à notre tableau d'incidents.
Si vous actualisez votre page après avoir ajouté un incident, vous devriez voir quelque chose
À ce stade, nous remarquerions une différence dans la façon dont récupère et la méthode asyncData charge nos données.
Conclusion
Conclusion
] Jusqu'à présent, nous avons découvert le module Axios et toutes ses fonctionnalités. Nous avons également appris plus sur asyncData et comment nous pouvons les récupérer ensemble malgré leurs différences. Nous avons également appris à effectuer l'authentification dans notre application à l'aide du module d'authentification et à utiliser le middleware d'authentification pour protéger nos itinéraires. Voici quelques ressources utiles qui parlent davantage de tout ce que nous avons couvert.
