首页  >  文章  >  web前端  >  使用拦截器自定义获取并在 nuxt 3 中登录

使用拦截器自定义获取并在 nuxt 3 中登录

PHPz
PHPz原创
2024-08-30 19:01:32508浏览

如果您使用过 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>

Custom fetch with Interceptors and logs in nuxt 3

当您检查网络调用时,您可以看到 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn