Benutzerdefinierter Abruf mit Interceptors und Protokollen in Nuxt 3

Wenn Sie Nuxt verwendet haben, sind Sie wahrscheinlich auf das praktische useFetch composable:
gestoßen

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

Dies vereinfacht das Abrufen von Daten, aber was ist, wenn Sie über eine Vielzahl von APIs verfügen, die alle eine Authentifizierung erfordern? Das Hinzufügen von Headern zu jedem Anruf wird schnell mühsam.

Abfangjäger betreten.

Um globale Interceptoren hinzuzufügen, erstellen wir einen benutzerdefinierten zusammensetzbaren Wrapper um $fetch. Dies ist besonders wertvoll, wenn Ihre API-Aufrufe ständig Autorisierungsheader benötigen.

Als Grundlage verwenden wir dasselbe Projekt aus meinem vorherigen Blogbeitrag zur Authentifizierung in Nuxt 3.

Beginnen wir mit der Erstellung eines neuen Composable im Composable-Ordner 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;

Erklärung:

• useAuthFetch: Unser benutzerdefiniertes Composable. Es benötigt die gleichen Argumente wie useFetch.
• customFetch: Erstellt eine benutzerdefinierte $fetch-Instanz mit Interceptoren.
• baseURL: Durch die Verwendung der baseURL-Option stellt Ofetch sie für nachgestellte/führende Schrägstriche voran und sucht Suchparameter für baseURL mit ufo:
ab
• onRequest: Dieser Interceptor wird vor jedem Abrufaufruf ausgeführt. Es holt sich das Token von einem Cookie und fügt den Authorization-Header hinzu, wenn ein Token vorhanden ist.
• onResponse: Wird nach einem erfolgreichen Abruf ausgeführt und sorgt für die Protokollierung.
• onResponseError: Behandelt Abruffehler, protokolliert Details und löst mithilfe von showError einen Fehler aus (vorausgesetzt, Sie haben dies definiert).
• useFetch(...) zurückgeben: Schließlich rufen wir den ursprünglichen useFetch auf, übergeben aber unseren customFetch, um die tatsächlichen Anfragen zu verarbeiten.

Mehr über die Abfangjäger erfahren Sie hier

Wenn Sie jetzt Daten von einer authentifizierten API abrufen müssen, verwenden Sie einfach useAuthFetch anstelle von useFetch, und die Autorisierung wird nahtlos gehandhabt.

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

Wenn Sie den Netzwerkaufruf überprüfen, können Sie sehen, dass die baseUrl korrekt ist und der Autorisierungsheader vorhanden ist

Protokollierung

In meinen Interceptoren habe ich einige Protokolle hinzugefügt. Dies kann nützlich sein, wenn Sie Tools wie Sentry in Ihrer Anwendung haben.

So fügen Sie Sentry zu Nuxt hinzu: https://www.lichter.io/articles/nuxt3-sentry-recipe/

im onRequest-Interceptor können Sie einen Breadcrumb zu Sentry hinzufügen

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

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

Wenn Ihr Backend eine TracingId zurückgibt, können Sie mit Sentry auch ein Tag und einen Kontext hinzufügen, um Fehler mit einem Endpunkt zu verknüpfen

onResponseError können Sie Kontext-Breadcrumb und Tag hinzufügen

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

Ersetzen Sie „tracingId“ durch das benutzerdefinierte Tracing-Protokoll, das Ihr Backend zurückgibt

Das obige ist der detaillierte Inhalt vonBenutzerdefinierter Abruf mit Interceptors und Protokollen in Nuxt 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!