使用拦截器自定义获取并在 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中文网其他相关文章！