如果您使用过 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中文网其他相关文章！
