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 :
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
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!