FacebookLinkedInTweet更新日期： 2024 年 11 月 19 日

在前端開發中，處理 API 的授權是常見的工作流程之一。

當用戶成功登入後，系統通常會回傳一組授權碼（Authorization Code），供後續請求使用。

本篇文章將介紹如何從 API 回應中取得這組授權碼，並保存到瀏覽器的 localStorage 中，確保用戶的登入狀態在頁面重新整理後仍然有效。

API 回應與 Authorization 碼

授權碼的位置

當用戶成功登入系統後，伺服器會回傳一組授權碼（Authorization Code）。

這個授權碼通常會存放在回應的 Header 區塊 中，作為驗證用戶身份的關鍵。

如何取得授權碼

在 JavaScript 中，我們可以使用 fetch API 與 Header 相關的方法來提取授權碼。

以下是步驟與範例程式碼：

使用 fetch 發送請求

假設我們已經向伺服器發送登入請求，並獲得了回應：

fetch('https://example.com/api/login', {

method: 'POST',

body: JSON.stringify({

username: 'user',

password: 'password'

}),

headers: {

'Content-Type': 'application/json'

}

})

.then(response => {

// 確認回應是否成功

if (!response.ok) {

throw new Error('Login failed');

}

return response;

})

.then(response => {

// 從 Header 中取得 Authorization 碼

const authorizationCode = response.headers.get('Authorization');

console.log('Authorization Code:', authorizationCode);

// 儲存到 localStorage

if (authorizationCode) {

localStorage.setItem('Authorization', authorizationCode);

}

})

.catch(error => {

console.error('Error:', error);

});

解釋 Header 區塊的 API

在 JavaScript 中，當使用 fetch 發送網路請求並獲得伺服器回應後，伺服器通常會包含一組 Header（標頭）資訊。

這些 Header 包含許多與回應相關的元數據，例如內容類型、狀態碼以及授權相關的欄位。

response.headers 物件

fetch 回應中的 headers 是一個類似 Map 的物件，允許我們使用方法操作標頭資訊。

特別是，headers.get(name) 方法可以用來根據欄位名稱檢索對應的值。

其具體用法如下：

const value = response.headers.get('欄位名稱');

Authorization 欄位

當伺服器返回授權碼時，通常會將它放在回應的 Authorization 欄位中。

該欄位用於標示用戶的身份憑證，通常在後續的 API 請求中需要帶上此授權碼來通過伺服器驗證。

以下是一個範例：

const authorizationCode = response.headers.get('Authorization');

使用時需注意：

欄位名稱區分大小寫：Authorization 是區分大小寫的，傳入錯誤的名稱（如 authorization）將導致無法獲取值。

欄位是否存在：某些伺服器可能未在回應中提供 Authorization 欄位。為避免錯誤，應檢查 headers.get('Authorization') 是否返回 null。

保存授權碼到 LocalStorage

為了避免用戶在刷新頁面時丟失登入狀態，可以將授權碼保存到 localStorage 中。

以下是關於 localStorage 的基本介紹：

什麼是 localStorage

localStorage 是瀏覽器提供的一個儲存機制，用於存放資料。它的特點包括：

資料會永久保存，除非主動清除或用戶手動刪除。

資料以鍵值對形式存放。

瀏覽器的每個網域都有獨立的 localStorage 空間。

localStorage 的常見用法

存入資料：

localStorage.setItem('key', 'value');

取出資料：

const value = localStorage.getItem('key');

刪除資料：

localStorage.removeItem('key');

清空所有資料：

localStorage.clear();

在我們的案例中，可以將授權碼保存到 localStorage，讓後續的 API 請求都可以使用這個授權碼。

完整範例：登入並保存授權碼

以下是一個整合範例，模擬用戶登入並將授權碼保存到 localStorage 的流程：

async function login(username, password) {

try {

const response = await fetch('https://example.com/api/login', {

method: 'POST',

body: JSON.stringify({ username, password }),

headers: { 'Content-Type': 'application/json' }

});

if (!response.ok) {

throw new Error('Login failed');

}

// 從 Header 中提取 Authorization

const authorizationCode = response.headers.get('Authorization');

console.log('Authorization Code:', authorizationCode);

// 將授權碼存入 localStorage

if (authorizationCode) {

localStorage.setItem('Authorization', authorizationCode);

console.log('Authorization Code saved to localStorage');

} else {

console.warn('No Authorization Code found in response headers');

}

} catch (error) {

console.error('Error during login:', error);

}

}

注意事項

安全性考量：儘管 localStorage 提供了便捷的存儲方式，但它的資料是以明文形式保存的，容易被瀏覽器插件或惡意腳本讀取。若授權碼關係到敏感數據，應考慮更安全的存儲方式，例如 HTTP-only Cookies。

Token 過期處理：若授權碼（例如 JWT Token）有過期時間，應在過期前刷新授權碼，或在 API 回應中提示用戶重新登入。

資料同步：若應用程式使用多個頁面或標籤，應使用 localStorage 的 storage 事件，確保授權碼在不同標籤間同步。

總結

取得 API 的授權碼是前端開發中的基礎技能，主要包含以下幾個步驟：

使用 fetch API，從回應的 Header 區塊中提取授權碼。

將授權碼保存到 localStorage，避免頁面刷新時丟失。

確保授權碼的安全性與時效性。

透過以上介紹，新手可以快速掌握這項技能，為開發穩健的前端應用打下良好的基礎。