frontend-api-client-with-jwt
在 Next.js 中建置具 JWT 處理的 API 用戶端
在 API 用戶端中管理 JWT 驗證相當複雜且容易出錯。此技能提供一套框架，用於在 Next.js 應用程式中實作安全、集中式的 API 通訊，並具備自動權杖更新、錯誤處理與一致的回應解析。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「frontend-api-client-with-jwt」。 Create an API client that handles JWT authentication
預期結果:
- 以 base URL 與 timeout 設定集中式 API 用戶端
- 以 Bearer 權杖格式附加 Authorization header
- 在 401 回應時觸發權杖更新機制
- 針對驗證失敗的錯誤處理並提供使用者回饋
- 用於記錄與 header 注入的請求攔截器
正在使用「frontend-api-client-with-jwt」。 How do I handle token expiration in my Next.js app
預期結果:
- 在發出請求前驗證權杖是否到期
- 在到期前主動更新權杖
- 在更新失敗時導向登入
- 更新後安全地儲存權杖
- 在多個並行請求間協調更新流程
正在使用「frontend-api-client-with-jwt」。 What security considerations exist for JWT in frontend
預期結果:
- 所有 API 通訊都使用 HTTPS
- 安全地儲存權杖以防止 XSS 攻擊
- 實作正確的 CORS 處理
- 避免在錯誤訊息中暴露敏感資料
- 處理前先驗證回應
安全審計
中風險The static findings are documentation terms in SKILL.md, not executable code, command execution, scanning, or exfiltration behavior. One semantic concern remains: the skill lists localStorage as a JWT storage option without enough warning about XSS exposure, so publication should include a security warning.
Confirmed security concerns (3)
品質評分
你可以打造什麼
Next.js API 用戶端架構
為 Next.js 應用程式設計集中式 API 用戶端，具備安全的 JWT 權杖處理與自動更新。
驗證流程整合
在用戶端與伺服器端元件中實作具權杖更新的無縫驗證流程。
React Hook API 模式
建置用於 API 通訊的自訂 hooks，能一致地處理 JWT 權杖與錯誤。
試試這些提示
在 Next.js 中建立一個 API 用戶端，能自動在請求中附加 JWT 權杖，並在 401 錯誤時處理權杖更新。
在 Next.js 應用程式中於 JWT 到期前實作自動權杖更新，以避免請求失敗。
為 API 用戶端建置錯誤回應解析，能識別 401 與 403 錯誤並適當地重新導向使用者。
為 Next.js API 用戶端建立請求攔截器，加入 authorization headers 並記錄送出的請求。
最佳實務
- 安全地儲存 JWT 權杖，並在發出 API 請求前驗證，以避免不必要的呼叫
- 在到期前主動更新權杖，而不是在 401 錯誤後被動處理
- 所有 API 通訊都使用 HTTPS 以保護傳輸中的權杖
避免
- 在沒有 XSS 防護的情況下將 JWT 權杖存放在 localStorage，會使權杖暴露於腳本注入攻擊
- 在沒有錯誤處理的情況下發出 API 呼叫會導致靜默失敗與不佳的使用者體驗
- 在缺乏協調的情況下實作權杖更新，可能導致並行請求的競態條件