Maison > interface Web > js tutoriel > le corps du texte

Récupération personnalisée avec les intercepteurs et les journaux dans Nuxt 3

PHPz
Libérer: 2024-08-30 19:01:32
original
506 Les gens l'ont consulté

Si vous avez utilisé Nuxt, vous avez probablement rencontré le composable useFetch pratique :

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch('/api/modules')
</script>

Copier après la connexion

Cela simplifie la récupération des données, mais que se passe-t-il si vous disposez d'une multitude d'API qui nécessitent toutes une authentification ? Ajouter des en-têtes à chaque appel devient vite fastidieux.

Entrez les intercepteurs.

Pour ajouter des intercepteurs globaux, nous allons créer un wrapper composable personnalisé autour de $fetch. Ceci est particulièrement utile lorsque vos appels d'API nécessitent systématiquement des en-têtes d'autorisation.

Comme base, utilisons le même projet de mon précédent article de blog sur l'authentification dans Nuxt 3.

commençons par créer un nouveau composable sous le dossier composable composables/useAuthFetch.ts

import type { UseFetchOptions } from 'nuxt/app';

const useAuthFetch = (url: string | (() => string), options: UseFetchOptions<null> = {}) => {
  const customFetch = $fetch.create({
    baseURL: 'https://dummyjson.com',
    onRequest({ options }) {
      const token = useCookie('token');
      if (token?.value) {
        console.log('[fetch request] Authorization header created');
        options.headers = options.headers || {};
        options.headers.Authorization = `Bearer ${token.value}`;
      }
    },
    onResponse({ response }) {
      console.info('onResponse ', {
        endpoint: response.url,
        status: response?.status,
      });
    },
    onResponseError({ response }) {
      const statusMessage = response?.status === 401 ? 'Unauthorized' : 'Response failed';
      console.error('onResponseError ', {
        endpoint: response.url,
        status: response?.status,
        statusMessage,
      });
      throw showError({
        statusCode: response?.status,
        statusMessage,
        fatal: true,
      });
    },
  });

  return useFetch(url, {
    ...options,
    $fetch: customFetch,
  });
};

export default useAuthFetch;
Copier après la connexion

Explication :

  • useAuthFetch : Notre composable personnalisé. Il prend les mêmes arguments que useFetch.
  • customFetch : crée une instance $fetch personnalisée avec des intercepteurs.
  • baseURL : en utilisant l'option baseURL, ofetch l'ajoute au début des barres obliques finales/initiales et interroge les paramètres de recherche pour baseURL à l'aide de ufo :
  • onRequest : cet intercepteur s'exécute avant chaque appel de récupération. Il récupère le jeton d'un cookie et ajoute l'en-tête Authorization si un jeton est présent.
  • onResponse : s'exécute après une récupération réussie, fournissant une journalisation.
  • onResponseError : gère les erreurs de récupération, enregistre les détails et renvoie une erreur à l'aide de showError (en supposant que cela soit défini).
  • return useFetch(...) : Enfin, nous appelons le useFetch d'origine, mais transmettons notre customFetch pour gérer les requêtes réelles.

vous pouvez en savoir plus sur les intercepteurs ici

Désormais, chaque fois que vous avez besoin de récupérer des données à partir d'une API authentifiée, utilisez simplement useAuthFetch au lieu de useFetch, et l'autorisation sera gérée de manière transparente.

<template>
  <div v-if="user">Welcome back {{ user.email }}</div>
  <div v-else>loading...</div>
</template>
<script lang="ts" setup>
const { data: user } = await useAuthFetch('/auth/me');
</script>
Copier après la connexion

Custom fetch with Interceptors and logs in nuxt 3

Lorsque vous inspectez l'appel réseau, vous pouvez voir que la baseUrl est correcte et que l'en-tête Authorization est présent

Enregistrement

Dans mes intercepteurs, j'ai ajouté quelques logs cela peut être utile si vous avez des outils comme Sentry dans votre application.

Comment ajouter Sentry à Nuxt : https://www.lichter.io/articles/nuxt3-sentry-recipe/

dans l'intercepteur onRequest, vous pouvez ajouter un fil d'Ariane à la sentinelle

import * as Sentry from '@sentry/vue';

Sentry.addBreadcrumb({
        type: 'http',
        category: 'xhr',
        message: ``,
        data: {
          url: `${options.baseURL}${request}`,
        },
        level: 'info',
});

Copier après la connexion

Si votre backend renvoie un tracingId, vous pouvez également ajouter une balise et un contexte avec sentinelle pour lier les erreurs à un point de terminaison

onResponseError, vous pouvez ajouter un fil d'Ariane et une balise contextuels

import * as Sentry from '@sentry/vue';

Sentry.setContext('http-error', {
   endpoint: response?.url,
   tracingId: 123,
   status: response?.status,
});
Sentry.addBreadcrumb({
 type: 'http',
 category: 'xhr',
 message: ``,
 data: {
  url: response?.url,
  status_code: response?.status,
 },
 level: 'error',
});
Sentry.setTag('tracingId', '123');
Copier après la connexion

remplacez tracingIdpar le journal de traçage personnalisé renvoyé par votre backend

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!