技能 Frontend API Client with JWT
📦

Frontend API Client with JWT

v1.0.0 内容修订 r2 安全

为 Next.js 构建 JWT API 客户端

前端应用经常重复处理令牌和解析错误。此技能指导 Claude、Codex 或 Claude Code 设计一个支持 JWT 的 API 客户端。

支持: Claude Codex Code(CC)
🥉 78 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "Frontend API Client with JWT" from https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt.md and its manifest at https://skillstore.io/api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/abdul-haseeb360-frontend-api-client-with-jwt.md 已签名 manifest GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/manifest 已签名 lockfile GET /api/skills/abdul-haseeb360-frontend-api-client-with-jwt/lockfile

测试它

正在使用“Frontend API Client with JWT”。 为 Next.js 仪表板设计一个支持 JWT 的客户端。

预期结果:

  • 共享客户端应负责 base URL 处理、Authorization 标头、超时和响应解析。
  • 令牌刷新应在并发请求中只运行一次，然后在刷新成功后重试符合条件的请求。
  • 身份验证失败应清除会话状态，并将用户路由到登录流程。

正在使用“Frontend API Client with JWT”。 审查令牌刷新行为的可靠性。

预期结果:

  • 在请求前检查令牌过期时间，并将 401 响应视为可能的刷新触发条件。
  • 当许多请求同时失败时，防止发起多个同时进行的刷新调用。
  • 测试刷新失败、无效令牌、网络超时和权限被拒绝等场景。

正在使用“Frontend API Client with JWT”。 列出前端令牌处理的安全注意事项。

预期结果:

  • 对每个经过身份验证的请求使用 HTTPS，并避免记录令牌值。
  • 根据 XSS、CSRF 和服务器渲染要求选择存储方式。
  • 返回对用户安全的错误消息，同时避免在 UI 中暴露敏感诊断信息。

安全审计

安全
v10 • 2026/7/18 打开版本化报告

All six static detections are false positives caused by ordinary JWT, HTTP error-handling, React context, and testing language. SKILL.md provides conceptual defensive implementation guidance and contains no evidence of reconnaissance, data exfiltration, prompt injection, or harmful behavior.

1
已扫描文件
171
分析行数
0
复核项
0
已忽略误报
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: claude 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/abdul-haseeb360-frontend-api-client-with-jwt/security.svg)](https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/abdul-haseeb360-frontend-api-client-with-jwt/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/abdul-haseeb360-frontend-api-client-with-jwt.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

Claude. (2026). Frontend API Client with JWT security audit report (audit version 10) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt/audits/10

BibTeX 引用

@techreport{claude-abdul-haseeb360-frontend-api-client-with-jwt-2026, author = {Claude}, title = {Frontend API Client with JWT security audit report (audit version 10)}, institution = {Skillstore}, year = {2026}, number = {10}, url = {https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt/audits/10}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "Frontend API Client with JWT security audit report (audit version 10)" version: "1.0.0" type: report authors: - name: "Claude" date-released: "2026-07-18" url: "https://skillstore.io/skills/abdul-haseeb360-frontend-api-client-with-jwt/audits/10" identifiers: - type: other value: "skillstore:abdul-haseeb360-frontend-api-client-with-jwt:audit:10" description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据 证据置信度: 高
55
架构
100
可维护性
87
内容
70
社区
65
规范符合性

你能构建什么

创建共享 API 层

规划一个可复用的客户端，用于标准化请求、响应、错误和身份验证行为。

审查身份验证架构

检查 Next.js 应用是否一致地处理令牌刷新、重定向以及服务器/客户端边界。

设计身份验证测试覆盖

识别有效令牌、过期令牌、刷新失败、并发请求和错误响应的测试场景。

试试这些提示

规划基础客户端 
为我的 Next.js 应用设计一个简单的集中式 API 客户端。包括 JWT 标头附加、base URL 处理和基础错误响应。
添加令牌刷新 
扩展我的 API 客户端设计，加入 JWT 过期检查、令牌刷新、重试行为以及刷新失败时的重定向处理。
支持 React 用法 
展示如何通过 React hooks 或 context 暴露 API 客户端，同时保持组件之间的令牌处理一致。
审计架构 
审查我计划中的 Next.js JWT API 客户端，找出安全性、性能、并发、错误处理和测试覆盖方面的缺口。

最佳实践

  • 将令牌附加、刷新和错误解析保留在一个共享客户端层中。
  • 在选择令牌存储方式之前，先建模客户端和服务器端执行上下文。
  • 测试过期、刷新失败、并发请求和授权错误。

避免

  • 不要在多个组件中重复 Authorization 标头逻辑。
  • 不要在日志或 UI 错误中暴露原始令牌值或敏感服务器细节。
  • 不要在未检查状态、方法和刷新状态的情况下重试每个失败请求。

常见问题

此技能会生成完整的 API 客户端吗？
它提供实现指导和架构提示，但不附带完整的源代码包。
它可以与 Next.js App Router 一起使用吗？
是的。该指导涵盖与 App Router 项目相关的客户端和服务器端上下文。
它是否要求使用 JWT 身份验证？
是的。该技能专为基于 JWT 的访问令牌和刷新流程而设计。
它能帮助选择令牌存储方式吗？
它可以比较 cookies 和浏览器存储等选项，但最终选择取决于你的威胁模型。
它是否涵盖错误处理？
是的。它概述了身份验证错误、授权错误、常规 HTTP 错误和网络失败的处理方式。
它对测试有用吗？
是的。它列出了令牌附加、刷新行为、无效令牌和并发请求处理的测试领域。

开发者详情

作者

Claude

许可证

MIT

作者版本

v1.0.0

Skillstore 修订

r2

仓库

https://github.com/Abdul-Haseeb360/Hackathon-II-AI-Native-Systems/tree/main/.claude/skills/frontend-api-client

引用

80999bf530a7874d7bedf8ce202001ecb4c4f5e0

维护新鲜度

2026/7/21

使用量

5 次下载 · 177 次浏览

文件结构

📄 SKILL.md

Claude 的更多技能

相关技能

查看全部