一、為什麼前後端分離需要 JWT？
如果你正在用 Vue 3、React 等框架開發單頁應用（SPA），一定會遇到一個問題：使用者登入後，下一個請求伺服器怎麼知道「你是你」？在傳統的伺服器渲染（SSR）時代，我們靠 Session + Cookie 把登入狀態存在伺服器記憶體裡；但前後端分離之後，前端與後端可能是不同網域、不同服務，Session 很難共享。
這時候 JWT（JSON Web Token）就派上用場了：它把「我是誰、有什麼權限」這份資訊，直接簽名後交給前端自己保管，後端只要驗證簽章就能信任，不需要每次查資料庫確認身分。
二、JWT 的三段式結構
一個 JWT 長這樣：xxxxx.yyyyy.zzzzz，用兩個點切成三段：
- Header（標頭）：記錄簽章演算法，例如
{"alg":"HS256","typ":"JWT"}。 - Payload（載荷）：存放你要帶的資料，如使用者 ID、角色、過期時間
exp。 - Signature（簽章）：用密鑰把前兩段加密，用來防止被竄改。
重點：Payload 只是編碼（Base64），並非加密，任何人都看得到裡面的內容，所以絕對不要把密碼、身分證等敏感資訊放進去。
三、實戰：後端簽發 Token
以 Node.js + Express 為例，使用 jsonwebtoken 套件：
const jwt = require('jsonwebtoken');
// 步驟 1: 登入成功後，簽發 Token
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
// 這裡應該先驗證帳號密碼（略）
const token = jwt.sign(
{ userId: 1001, role: 'editor' },
'YOUR_SECRET_KEY', // 重點: 密鑰要放在環境變數，不要寫死在程式碼
{ expiresIn: '2h' } // 2 小時後過期
);
res.json({ token });
});
四、實戰：前端儲存與攜帶 Token
步驟 1: 登入成功後把 Token 存起來。常見做法有兩種：
- localStorage：使用方便，但容易被 XSS 攻擊竊取。
- httpOnly Cookie：前端讀不到，安全性較高，但需要後端配合設定。
步驟 2: 發送請求時，透過 axios 攔截器自動在標頭帶上 Token：
import axios from 'axios';
// 步驟 3: 請求攔截器，自動附加 Authorization 標頭
axios.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
五、實戰：路由守衛攔截未登入
在 Vue Router 中，我們可以在進入頁面前檢查 Token 是否存在：
// 步驟 4: 全域前置守衛
router.beforeEach((to) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
return { name: 'login' }; // 沒 Token 就跳回登入頁
}
});
重點：前端的路由守衛只是使用者體驗層的攔截，真正的安全防線仍在後端——每個受保護的 API 都必須重新驗證 Token 的簽章與有效期。
六、過期怎麼辦？Refresh Token
Access Token 有效期短（如 2 小時）是為了安全，但總不能兩小時就被迫登出一次。實務上會搭配一組有效期較長的 Refresh Token：當 Access Token 過期，前端拿 Refresh Token 去換一組新的 Access Token，使用者無感續期。
七、安全注意事項
- 密鑰保密：HS256 的密鑰一旦外洩，攻擊者能偽造任意 Token，務必放在環境變數。
- 設定合理過期：Access Token 不宜過長，配合 Refresh Token 機制。
- HTTPS 傳輸：Token 在網路上明文傳遞，必須走 HTTPS 防止被攔截。
- 後端驗證不可省：前端守衛只是輔助，每個 API 都要驗章。
學會 JWT，你就掌握了前後端分離架構下「身份校驗」的核心鑰匙。它不複雜，但細節裡全是安全。
互動話題：你們團隊的 Token 是存在 localStorage 還是 httpOnly Cookie？有沒有遇過因為 Token 過期導致的奇怪 Bug？歡迎留言交流！