useRequest 三部曲

useRequestEvent

使用 useRequestEvent 组合函数来访问传入的请求事件。

在你的页面、组件和插件中，你可以使用 useRequestEvent 来访问传入的请求。

// 获取底层请求事件
const event = useRequestEvent();

// 获取 URL
const url = event.path;

• 在浏览器中会返回 undefined

在浏览器中，useRequestEvent 会返回 undefined。

useRequestHeaders

使用 useRequestHeaders 来访问传入请求的头部信息。

你可以使用内置的 useRequestHeaders 组合函数来访问页面、组件和插件中传入请求的头部信息

// 获取所有请求头信息
const headers = useRequestHeaders();

// 仅获取 cookie 请求头信息
const headers = useRequestHeaders(["cookie"]);

• 在浏览器中，useRequestHeaders 将返回一个空对象

示例

我们可以使用 useRequestHeaders 来访问并代理初始请求的 authorization 头部信息，以便在 SSR 过程中对未来的内部请求进行授权。

下面的示例将 authorization 请求头部信息添加到一个同构的 $fetch 调用中。

<script setup lang="ts">
  const { data } = await useFetch("/api/confidential", {
    headers: useRequestHeaders(["authorization"]),
  });
</script>