前端新手指南：如何取得 API 的 Authorization 碼
更新日期： 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 的授權碼是前端開發中的基礎技能，主要包含以下幾個步驟：
- 使用
fetchAPI，從回應的 Header 區塊中提取授權碼。 - 將授權碼保存到
localStorage，避免頁面刷新時丟失。 - 確保授權碼的安全性與時效性。
透過以上介紹，新手可以快速掌握這項技能，為開發穩健的前端應用打下良好的基礎。