Pengambilan tersuai dengan Pemintas dan log masuk nuxt 3

Jika anda telah menggunakan Nuxt, anda mungkin pernah menemui penggunaan yang boleh digubah gunaFetch:

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

Ini memudahkan pengambilan data, tetapi bagaimana jika anda mempunyai banyak API yang semuanya memerlukan pengesahan? Menambah pengepala pada setiap panggilan menjadi cepat membosankan.

Masukkan pemintas.

Untuk menambah pemintas global, kami akan membina pembalut boleh gubah tersuai di sekitar $fetch. Ini amat berharga apabila panggilan API anda memerlukan pengepala kebenaran secara konsisten.

Sebagai asas, mari kita gunakan projek yang sama dari catatan blog saya sebelum ini tentang Pengesahan dalam Nuxt 3.

mari mulakan dengan mencipta composable baharu di bawah composable folder 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;

Penjelasan:

• useAuthFetch: Boleh gubah tersuai kami. Ia memerlukan hujah yang sama seperti useFetch.
• customFetch: Mencipta tika $fetch tersuai dengan pemintas.
• baseURL: Dengan menggunakan pilihan baseURL, ofetch menambahkannya untuk garis miring mengekor/mendepan dan parameter carian pertanyaan untuk baseURL menggunakan ufo:
• onRequest: Pemintas ini berjalan sebelum setiap panggilan pengambilan. Ia mengambil token daripada kuki dan menambahkan pengepala Kebenaran jika token ada.
• onResponse: Berjalan selepas pengambilan berjaya, menyediakan pengelogan.
• onResponseError: Mengendalikan ralat pengambilan, butiran log dan melontarkan ralat menggunakan showError (dengan andaian anda telah menetapkan ini).
• kembali useFetch(...): Akhir sekali, kami memanggil useFetch asal, tetapi masukkan customFetch kami untuk mengendalikan permintaan sebenar.

anda boleh mengetahui lebih lanjut tentang pemintas di sini

Kini, apabila anda perlu mengambil data daripada API yang disahkan, hanya gunakan useAuthFetch dan bukannya useFetch dan kebenaran akan dikendalikan dengan lancar.

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

Apabila anda memeriksa panggilan rangkaian anda dapat melihat baseUrl adalah betul dan pengepala Kebenaran hadir

Pembalakan

Dalam pemintas saya, saya telah menambah beberapa log ini boleh berguna jika anda mempunyai alatan seperti Sentry dalam aplikasi anda.

Cara menambah Sentry ke Nuxt: https://www.lichter.io/articles/nuxt3-sentry-recipe/

dalam pemintas onRequest anda boleh menambah serbuk roti pada sentri

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

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

jika bahagian belakang anda mengembalikan tracingId anda juga boleh menambah teg dan konteks dengan ralat pengawal untuk memaut dengan titik akhir

onResponseError anda boleh menambah serbuk roti konteks dan teg

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

ganti tracingId dengan apa-apa log penjejakan tersuai yang dikembalikan bahagian belakang anda

Atas ialah kandungan terperinci Pengambilan tersuai dengan Pemintas dan log masuk nuxt 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!