前端面試問到登入機制時，很常會連續追問兩題：
- JWT 是什麼？
- OAuth 流程怎麼跑？
這兩題很容易被混在一起，但其實它們解決的是不同層級的問題。
JWT 是一種 token 格式，常用來表示「這個請求是誰發出的」。
OAuth 是一套授權流程，用來讓使用者同意某個應用程式取得特定資源。
JWT 是什麼？
JWT 全名是 JSON Web Token，是一種把資訊包成字串的 token 格式。常見用途是登入後由後端簽發 token，前端之後呼叫 API 時把 token 帶上，後端就能驗證使用者身分。
一個 JWT 通常長這樣：
xxxxx.yyyyy.zzzzz它由三段組成：
| 區段 | 用途 |
|---|---|
| Header | 描述 token 類型與簽章演算法，例如 HS256、RS256 |
| Payload | 放 claims，例如 userId、role、exp |
| Signature | 用密鑰簽出來的結果，用來確認 token 沒被竄改 |
面試可以這樣回答：
JWT 是一種自包含的 token 格式，由 header、payload、signature 三段組成。後端簽發後，前端可以在呼叫 API 時把它放在
Authorization: Bearer <token>。後端驗證 signature 與過期時間後，就能判斷使用者身分。
JWT 的重點不是加密，而是簽章
這是面試很常追的點。
JWT 的 payload 預設只是 Base64URL 編碼，不是加密。任何人拿到 token 都可以 decode 看到 payload 內容。
所以 payload 裡不應該放：
- 密碼
- 信用卡
- 身分證字號
- 任何不希望被使用者看到的敏感資料
JWT 的 signature 解決的是「有沒有被改過」，不是「內容有沒有被藏起來」。
// 不適合放敏感資料
{
"sub": "user_123",
"role": "admin",
"exp": 1781174400
}面試補一句會很加分：
JWT 預設不是加密，payload 只能放可以被使用者看到的資訊。真正的安全性來自 HTTPS、合理的過期時間、簽章驗證，以及 refresh token / revoke 機制的設計。
JWT 放 localStorage 還是 Cookie？
這題沒有唯一答案，重點是你能不能講出風險。
| 放置位置 | 優點 | 風險 |
|---|---|---|
localStorage | 實作簡單，前端容易控制 header | 容易受到 XSS 影響 |
HttpOnly Cookie | JS 讀不到，降低 token 被 XSS 偷走的機率 | 需要處理 CSRF、SameSite、CORS |
如果是一般 Web App，我會傾向：
- access token 短效
- refresh token 放
HttpOnly、Secure、SameSiteCookie - 前端不要把長效 token 放在
localStorage
但面試時不要只背答案，最好補上場景：
如果系統主要風險是 XSS，HttpOnly Cookie 會比 localStorage 更安全；但 Cookie 會牽涉 CSRF 與跨域設定，所以要搭配 SameSite、CSRF token 或明確的 CORS 策略。
OAuth 是什麼？
OAuth 2.0 是一套授權標準。
它解決的問題不是「使用者密碼怎麼驗」，而是：
使用者能不能授權某個第三方應用，在不交出密碼的情況下，取得某些資源？
最常見例子是「使用 Google 登入」。
你的網站不需要知道使用者的 Google 密碼，而是把使用者導到 Google。使用者同意後，Google 回傳授權結果，你的系統再拿這個結果換 token。
OAuth Authorization Code Flow
前端面試最常問的是 Authorization Code Flow。流程可以拆成六步：
- 使用者點擊「使用 Google 登入」
- 前端導向 OAuth Provider，例如 Google
- 使用者登入並同意授權範圍
- Provider redirect 回你的 callback URL，並帶上
code - 後端拿
code去 Provider 換 access token - 後端建立自己的 session 或簽發自己的 JWT 給前端
簡化後的流程：
User
→ Frontend
→ Google OAuth Login
→ callback?code=abc
→ Backend 用 code 換 token
→ 建立站內登入狀態面試回答可以這樣講：
OAuth 的 Authorization Code Flow 會先把使用者導到授權伺服器，使用者同意後，授權伺服器 redirect 回 callback URL 並附上 code。應用程式後端再用這個 code 去換 access token。前端不應該直接保管 client secret，正式環境也通常會搭配 PKCE 來降低 code 被攔截的風險。
OAuth 和 JWT 的差別
這題最適合用一句話收斂：
OAuth 是授權流程，JWT 是 token 格式。OAuth 流程中可能拿到 JWT，但 OAuth 本身不等於 JWT。
再補一個表格：
| 比較 | JWT | OAuth |
|---|---|---|
| 本質 | Token 格式 | 授權框架 |
| 解決問題 | 如何表示身分與 claims | 如何讓使用者授權第三方 |
| 常見位置 | API 請求的 Bearer token | Google / GitHub / Facebook 登入流程 |
| 面試關鍵 | 三段結構、簽章、過期、安全儲存 | Authorization Code Flow、redirect、scope、PKCE |
面試常見追問
JWT 過期怎麼辦？
通常會設計 access token + refresh token：
- access token 短效，例如 15 分鐘
- refresh token 長效，用來換新的 access token
- refresh token 需要能被 revoke
如果 access token 過期，前端可以呼叫 refresh API。成功就重送原本請求，失敗就導回登入頁。
JWT 可以登出嗎？
JWT 本身是 stateless，簽出去後只要沒過期，後端只靠 signature 無法知道使用者是否已登出。
常見解法：
- access token 設短效
- refresh token 存 DB，登出時刪除或標記失效
- 對高風險系統加 blacklist / token version
scope 是什麼？
scope 是授權範圍，例如：
read:user
repo:read
calendar.events.readonly它讓使用者知道這個 app 要拿哪些權限，也讓 Provider 可以限制 token 能做的事情。
我的面試回答模板
如果面試官問「JWT 是什麼？OAuth 流程是什麼？」我會這樣回答：
JWT 是一種 token 格式，通常由 header、payload、signature 組成，用來讓後端驗證請求者身分。payload 預設只是編碼不是加密，所以不能放敏感資料。OAuth 則是一套授權流程，例如 Google Login，使用者會被導到授權伺服器，同意後回到 callback，後端再用 authorization code 換 access token。簡單說，OAuth 是流程，JWT 是 token 格式，兩者常一起使用但不是同一件事。
這樣回答的好處是：先把兩者切開，再講流程，最後補安全注意事項。面試官通常就會知道你不是只背名詞。