你有使用過JWT嗎？說說你對它的理解

王铁柱6發表於2024-11-23
JWT

我理解 JWT (JSON Web Token) 作為前端開發中一個重要的授權和資訊交換機制。它本質上是一個自包含的、安全的傳輸資訊的方式，通常用於使用者認證和授權。

前端使用 JWT 的主要流程如下：

  1. 使用者登入: 使用者提交憑據（例如使用者名稱和密碼）到後端伺服器。
  2. 後端驗證: 伺服器驗證憑據，如果有效，則建立一個 JWT。
  3. JWT 返回前端: 伺服器將生成的 JWT 返回給前端，通常放在 Authorization header 中，使用 Bearer scheme，例如 Authorization: Bearer <token>。
  4. 前端儲存 JWT: 前端通常將 JWT 儲存在 localStorage 或 sessionStorage 中。 localStorage 持久儲存，除非手動清除，否則即使關閉瀏覽器 JWT 依然存在；sessionStorage 則在瀏覽器會話結束時清除。 Cookie 也可以用來儲存 JWT，但需要注意安全性和跨域問題，需要設定合適的 HttpOnly, Secure, SameSite 屬性。
  5. 後續請求: 前端在後續的每個請求中都將 JWT 附加到 Authorization header 中，傳送到後端。
  6. 後端驗證 JWT: 後端接收到請求後，會驗證 JWT 的簽名和有效期，確保其未被篡改且仍然有效。
  7. 授權訪問: 如果 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 的建立、解析和驗證過程。

相關文章