使用攔截器自訂獲取並在 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：此攔截器在每次 fetch 呼叫之前執行。它從 cookie 中取得令牌，並在存在令牌時新增授權標頭。
• onResponse：成功取得後運行，提供日誌記錄。
• onResponseError：處理獲取錯誤，記錄詳細信息，並使用 showError 拋出錯誤（假設您已經定義了該錯誤）。
• return useFetch(...)：最後，我們呼叫原來的useFetch，但傳入我們的customFetch來處理實際的請求。

您可以在這裡找到有關攔截器的更多資訊

現在，每當您需要從經過驗證的 API 取得資料時，只需使用 useAuthFetch 而不是 useFetch，授權將無縫處理。

<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 這樣的工具，這可能會很有用。

如何將Sentry加入Nuxt：https://www.lichter.io/articles/nuxt3-sentry-recipe/

在 onRequest 攔截器中，您可以為哨兵添加麵包屑

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

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

如果您的後端返回追蹤Id，您也可以使用哨兵添加標籤和上下文，以將錯誤與端點連結起來

onResponseError 您可以新增上下文麵包屑和標籤

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中文網其他相關文章！