我理解 JWT (JSON Web Token) 作為前端開發中一個重要的授權和資訊交換機制。它本質上是一個自包含的、安全的傳輸資訊的方式,通常用於使用者認證和授權。
前端使用 JWT 的主要流程如下:
- 使用者登入: 使用者提交憑據(例如使用者名稱和密碼)到後端伺服器。
- 後端驗證: 伺服器驗證憑據,如果有效,則建立一個 JWT。
- JWT 返回前端: 伺服器將生成的 JWT 返回給前端,通常放在
Authorization
header 中,使用Bearer
scheme,例如Authorization: Bearer <token>
。 - 前端儲存 JWT: 前端通常將 JWT 儲存在 localStorage 或 sessionStorage 中。 localStorage 持久儲存,除非手動清除,否則即使關閉瀏覽器 JWT 依然存在;sessionStorage 則在瀏覽器會話結束時清除。 Cookie 也可以用來儲存 JWT,但需要注意安全性和跨域問題,需要設定合適的
HttpOnly
,Secure
,SameSite
屬性。 - 後續請求: 前端在後續的每個請求中都將 JWT 附加到
Authorization
header 中,傳送到後端。 - 後端驗證 JWT: 後端接收到請求後,會驗證 JWT 的簽名和有效期,確保其未被篡改且仍然有效。
- 授權訪問: 如果 JWT 有效,後端允許訪問受保護的資源。
JWT 的結構:
JWT 由三部分組成,用點號 (.
) 分隔:
- Header (頭部): 包含 JWT 的型別和使用的雜湊演算法,例如:
{ "alg": "HS256", "typ": "JWT" }
- Payload (有效載荷): 包含使用者的資訊和宣告 (claims),例如使用者 ID、角色、過期時間等。 這是 JWT 傳輸資訊的核心部分。 需要注意的是,Payload 部分未加密,只是編碼了,所以不要在其中儲存敏感資訊。
{ "sub": "1234567890", "name": "John Doe", "iat": 1516239022, "exp": 1516249022 }
- Signature (簽名): 用於驗證 JWT 的完整性,確保 JWT 未被篡改。 簽名是使用 Header 中指定的演算法,對 Header 和 Payload 進行簽名生成的。
前端開發中使用 JWT 的優勢:
- 無狀態: 伺服器不需要儲存使用者的會話資訊,減輕了伺服器的負擔,也更容易實現水平擴充套件。
- 跨域認證: JWT 可以輕鬆實現跨域認證,因為認證資訊包含在 JWT 中。
- 易於擴充套件: JWT 可以包含各種自定義的宣告 (claims),方便擴充套件。
前端開發中使用 JWT 的注意事項:
- 儲存安全: 避免將 JWT 儲存在易受 XSS 攻擊的地方,例如 DOM 中。 推薦使用 HttpOnly cookie 或 Web Storage,並設定合適的 SameSite 屬性。
- 過期時間: 設定合適的過期時間,以平衡安全性和使用者體驗。
- 重新整理機制: 實現 JWT 的重新整理機制,以便使用者在 JWT 過期後可以繼續訪問受保護的資源,通常使用 refresh token 機制。
總而言之,JWT 為前端開發提供了一種安全、高效的使用者認證和授權機制,理解其工作原理和最佳實踐對於構建安全的 Web 應用至關重要。 在實際應用中,可以藉助一些 JWT 的庫來簡化 JWT 的建立、解析和驗證過程。