nuxt 3 のインターセプターとログを使用したカスタムフェッチ

Nuxt を使用したことがある場合は、おそらく便利な useFetch コンポーザブルに遭遇したことがあるでしょう。

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

これによりデータの取得が簡素化されますが、すべて認証を必要とする API が多数ある場合はどうなるでしょうか? 各呼び出しにヘッダーを追加するのはすぐに面倒になってしまいます。

インターセプターを入力します。

グローバル インターセプターを追加するには、$fetch の周りにカスタムのコンポーザブル ラッパーを構築します。これは、API 呼び出しで常に認証ヘッダーが必要な場合に特に役立ちます。

基礎として、Nuxt 3 での認証に関する以前のブログ投稿と同じプロジェクトを使用してみましょう。

まず、コンポーザブル フォルダー 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;

説明:

• useAuthFetch: カスタム コンポーザブル。 useFetch と同じ引数を受け取ります。
• customFetch: インターセプターを使用してカスタマイズされた $fetch インスタンスを作成します。
• baseURL:baseURL オプションを使用すると、ofetch は末尾/先頭のスラッシュの先頭に付加し、ufo:
を使用してbaseURL の検索パラメータをクエリします。
• onRequest: このインターセプターは、すべてのフェッチ呼び出しの前に実行されます。 Cookie からトークンを取得し、トークンが存在する場合は Authorization ヘッダーを追加します。
• onResponse: フェッチが成功した後に実行され、ログが記録されます。
• onResponseError: フェッチ エラーを処理し、詳細をログに記録し、showError を使用してエラーをスローします (これが定義されていると仮定します)。
• return useFetch(...): 最後に、元の useFetch を呼び出しますが、実際のリクエストを処理するために CustomFetch を渡します。

インターセプターの詳細については、こちらをご覧ください

これで、認証された API からデータをフェッチする必要があるときはいつでも、useFetch の代わりに useAuthFetch を使用するだけで、認証がシームレスに処理されます。

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

ネットワーク呼び出しを検査すると、baseUrl が正しく、Authorization ヘッダーが存在することがわかります

ロギング

私のインターセプターには、アプリケーションに Sentry などのツールがある場合に役立つログをいくつか追加しました。

Nuxt に Sentry を追加する方法: https://www.lichter.io/articles/nuxt3-sentry-recipe/

onRequest インターセプターで、パンくずリストを Sentry に追加できます

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

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

バックエンドが tracingId を返す場合は、セントリーのタグとコンテキストを追加して、エラーをエンドポイントにリンクすることもできます

ResponseError では、コンテキストのブレッドクラムとタグを追加できます

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

tracingId をバックエンドが返すカスタム トレース ログに置き換えます

以上がnuxt 3 のインターセプターとログを使用したカスタムフェッチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。