From 40a5f449425eb696fc8a524956465c126d69e36d Mon Sep 17 00:00:00 2001
From: Michael Brevard <yonshi29@gmail.com>
Date: Sat, 16 Dec 2023 11:08:56 +0200
Subject: [PATCH] feat(nuxt): `useRequestHeader` utility (#24781)

---
 .../3.api/2.composables/use-request-header.md | 34 +++++++++++++++++++
 packages/nuxt/src/app/composables/ssr.ts      |  8 ++++-
 packages/nuxt/src/imports/presets.ts          |  2 +-
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 docs/3.api/2.composables/use-request-header.md

diff --git a/docs/3.api/2.composables/use-request-header.md b/docs/3.api/2.composables/use-request-header.md
new file mode 100644
index 0000000000..d2e21ecb4e
--- /dev/null
+++ b/docs/3.api/2.composables/use-request-header.md
@@ -0,0 +1,34 @@
+---
+title: "useRequestHeader"
+description: "Use useRequestHeader to access a certain incoming request header."
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/ssr.ts
+    size: xs
+---
+
+You can use the built-in [`useRequestHeader`](/docs/api/composables/use-request-header) composable to access any incoming request header within your pages, components, and plugins.
+
+```ts
+// Get the authorization request header
+const authorization = useRequestHeader('authorization')
+```
+
+::callout
+In the browser, `useRequestHeader` will return `undefined`.
+::
+
+## Example
+
+We can use `useRequestHeader` to easily figure out if a user is authorized or not.
+
+The example below reads the `authorization` request header to find out if a person can access a restricted resource.
+
+```ts [middleware/authorized-only.ts]
+export default defineNuxtRouteMiddleware((to, from) => {
+  if (!useRequestHeader('authorization')) {
+    return navigateTo('/not-authorized')
+  }
+})
+```
diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 592845b53b..8be4780271 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,5 +1,5 @@
 import type { H3Event } from 'h3'
-import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeaders } from 'h3'
+import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders } from 'h3'
 import type { NuxtApp } from '../nuxt'
 import { useNuxtApp } from '../nuxt'
 
@@ -17,6 +17,12 @@ export function useRequestHeaders (include?: any[]) {
   return Object.fromEntries(include.map(key => key.toLowerCase()).filter(key => headers[key]).map(key => [key, headers[key]]))
 }
 
+export function useRequestHeader(header: string) {
+  if (import.meta.client) { return undefined }
+  const event = useRequestEvent()
+  return event ? getRequestHeader(event, header) : undefined
+}
+
 export function useRequestFetch (): typeof global.$fetch {
   if (import.meta.client) {
     return globalThis.$fetch
diff --git a/packages/nuxt/src/imports/presets.ts b/packages/nuxt/src/imports/presets.ts
index 4f89620713..dde8d847cd 100644
--- a/packages/nuxt/src/imports/presets.ts
+++ b/packages/nuxt/src/imports/presets.ts
@@ -58,7 +58,7 @@ const granularAppPresets: InlinePreset[] = [
     from: '#app/composables/cookie'
   },
   {
-    imports: ['prerenderRoutes', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
+    imports: ['prerenderRoutes', 'useRequestHeader', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
     from: '#app/composables/ssr'
   },
   {