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

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>

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;

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>

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',
});

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');

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!