React单页应用身份认证集成

该能力专为 React 单页应用（SPA）设计，基于 @clerk/react 官方 SDK，提供从根组件 ClerkProvider 配置、环境变量读取，到 useAuth / useUser 状态判断与路由守卫（ProtectedRoute）的一整套开发范式。它帮助前端开发者正确处理客户端加载态保护（isLoaded）、JWT 令牌获取以及与 React Router v6/v7 的路由鉴权对接，规避常见的白屏和未授权状态误判问题。

它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。

常见场景

它能帮你做什么？

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么，或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

“如何在 Vite + React 项目中配置 ClerkProvider 和 React Router 路由守卫？”

“请帮我用 @clerk/react 编写一个支持 isLoaded 加载判断的 ProtectedRoute 组件。”

“如何使用 useAuth 钩子在 fetch 请求头中携带 Clerk 颁发的 JWT Bearer 令牌？”

适用人群

适合谁？

React 前端开发工程师全栈独立开发者使用 Vite 开发客户端应用的技术人员

上手门槛

使用难度

进阶

需要了解任务流程，页面已整理好使用步骤。

兼容范围

支持哪些 AI？

Codex可直接使用

Claude Code可直接使用

OpenClaw可直接使用

Hermes可直接使用

国内 Agent可直接使用

中文用户增强

Skill Px 做了什么？

中文说明简化使用方式补充中文案例整理安装流程降低理解难度

React单页应用身份认证集成.Skill