frontend-api-client-with-jwt
在 Next.js 中构建具有 JWT 处理的 API 客户端
在 API 客户端中管理 JWT 身份验证既复杂又容易出错。本技能提供了一个框架，用于在 Next.js 应用程序中实现安全、集中的 API 通信，包括自动令牌刷新、错误处理和一致的响应解析。
下载技能 ZIP
在 Claude 中上传
前往 Settings → Capabilities → Skills → Upload skill
开启并开始使用
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-api-client-with-jwt”。 Create an API client that handles JWT authentication
预期结果:
- 具有基础 URL 和超时设置的集中式 API 客户端配置
- 使用 Bearer 令牌格式附加授权标头
- 在 401 响应时触发令牌刷新机制
- 身份验证失败时的错误处理和用户反馈
- 用于日志记录和标头注入的请求拦截器
正在使用“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.
已确认安全问题 (3)
质量评分
你能构建什么
Next.js API 客户端架构
为 Next.js 应用程序设计一个具有安全 JWT 令牌处理和自动刷新的集中式 API 客户端。
身份验证流程集成
在客户端和服务器组件之间实现具有令牌刷新的无缝身份验证流程。
React Hook API 模式
构建用于 API 通信的自定义 Hook，以一致的方式处理 JWT 令牌和错误。
试试这些提示
在 Next.js 中创建一个 API 客户端，自动将 JWT 令牌附加到请求并在 401 错误时处理令牌刷新。
在 Next.js 应用程序中在 JWT 过期前实现自动令牌刷新，以防止请求失败。
为 API 客户端构建错误响应解析，识别 401 和 403 错误并适当重定向用户。
为 Next.js API 客户端创建请求拦截器，添加授权标头并记录传出请求。
最佳实践
- 安全存储 JWT 令牌，并在发出 API 请求前进行验证，以防止不必要的调用
- 主动在令牌过期前实现令牌刷新，而非在 401 错误后被动响应
- 对所有 API 通信使用 HTTPS 以保护传输过程中的令牌
避免
- 在 localStorage 中存储 JWT 令牌而不进行 XSS 保护会使令牌暴露于脚本注入攻击
- 在没有错误处理的情况下进行 API 调用会导致静默失败和糟糕的用户体验
- 在没有协调的情况下实现令牌刷新可能导致并发请求的竞争条件