服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch

Amd794發表於2024-07-24
服務端Header

title: 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch
date: 2024/7/24
updated: 2024/7/24
author: cmdragon

excerpt:
摘要：本文介紹Vue服務端渲染中使用useRequestHeaders獲取請求頭部資訊，如cookie和authorization，示例展示瞭如何在SSR環境下結合useFetch進行API呼叫，注意瀏覽器環境返回空物件。

categories:

  • 前端開發

tags:

  • 服務端渲染
  • Vue
  • SSR
  • 資料獲取
  • API呼叫
  • 請求頭
  • useFetch

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

useRequestHeaders 是一個用於訪問傳入請求頭部資訊的組合函式，通常用於服務端渲染（SSR）環境中。在瀏覽器環境下，它將返回一個空物件，因為瀏覽器的請求頭資訊並不直接可用。

以下是 useRequestHeaders 的使用示例和詳細說明：

基本用法

  1. 獲取所有請求頭資訊：

    const headers = useRequestHeaders();

  2. 僅獲取特定請求頭資訊（如 cookie） ：

    const headers = useRequestHeaders(['cookie']);

示例：使用 useRequestHeaders 進行授權

在服務端渲染的頁面中，我們可以使用 useRequestHeaders 來獲取 authorization 請求頭資訊，並將其用於後續的 API 呼叫。以下是一個示例，展示如何在 pages/some-page.vue 中實現這一點：

<template>
  <div>
    <h1>機密資訊</h1>
    <pre>{{ data }}</pre>
  </div>
</template>

<script setup>
import { useFetch, useRequestHeaders } from 'vue'; // 確保已正確匯入所需的函式

// 獲取 authorization 請求頭
const headers = useRequestHeaders(['authorization']);

// 使用 $fetch 呼叫 API，並將 authorization 頭部資訊傳遞過去
const { data } = await useFetch('/api/confidential', {
  headers: headers
});
</script>

注意事項

  • 在瀏覽器環境中，useRequestHeaders 返回的物件為空，因此在客戶端渲染時無法獲取請求頭資訊。
  • 該函式主要用於服務端渲染的場景，確保在適當的環境中使用。
  • 使用 useFetch 進行 API 請求時，可以將獲取到的請求頭資訊傳遞給後端，以便進行身份驗證或其他處理。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog

往期文章歸檔：

  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog

相關文章