De-yu's Note
  • Deyu Notebook
  • Side Project
    • Stock
    • ChatBox
    • SnowCraft
    • ScrollBar
  • 架構問題
    • 解決 RTK Query data 為 undefined 的實務做法
    • 透過 xstate 解決UI 狀態問題
  • 技術觀點
    • 為什麼需要 store
    • Router 作用
    • react 和 next.js 差異
    • monoRepo vs Multiple Repo
  • Performance
    • React 優化
  • JS Coding
    • Curry
    • Debounce
    • Throttle
  • map
  • memo()
  • Promise 實作
  • Promise Function
  • Testing
    • 使用 Jest 、 React Testing Library 、MSW 建立測試環境
  • Miscellaneous
    • Event Loop
    • Browser
    • Code Review
    • Storage
  • AMD 、 CommonJS 、 ES modules
  • JWT
  • Next.js
  • 用過的 module
  • Internet
    • UDP
  • TCP/IP
  • SSL TLS
  • HTTP
  • AI 工作流
    • Page 1
Powered by GitBook
On this page

JWT

JWT : Json Web Token

基於 JSON 格式的安全令牌,用於在兩個系統之間傳遞經過驗證的信息。JWT 通常用於身份驗證和授權場景。它的結構由三個部分組成,每一部分之間用點 (.) 分隔

  1. Header 分成兩個部分 加密演算法 & token type 值一般是 JWT

  2. Payload jwt 主要傳遞的資料 預定義的(如 iss、exp、sub 等)或自定義的數據。 例如:{ "sub": "1234567890", "name": "John Doe", "admin": true }

  3. Signature 簽名部分是為了確保令牌的完整性,防止數據被篡改。簽名是通過對 Header 和 Payload 進行編碼後,使用密鑰和指定的簽名算法生成的

例如:HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)

secret是存放在伺服器端的秘密字串,最後將這三個部分串接再一起的字串進行加密演算法進行加密

import jwt from 'jsonwebtoken';
import { jwtDecode } from "jwt-decode"; // 無加密功能
let token = jwt.sign({ data: 'data' }, 'key');
console.log(token)
console.log(jwtDecode(token))
console.log(jwt.verify(token, 'sss')) // 失敗會拋出 error
console.log(jwt.decode(token))
PreviousAMD 、 CommonJS 、 ES modulesNextNext.js

Last updated 28 days ago