如果您使用过 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;
说明:
您可以在这里找到有关拦截器的更多信息
现在,每当您需要从经过身份验证的 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中文网其他相关文章!