# 文员身份验证 **状态**：生产就绪 ✅ **最后更新**：2025-10-28 **依赖项**：无 **最新版本**：@clerk/nextjs@6.33.3、@clerk/backend@2.17.2、@clerk/clerk-react@5.51.0、@clerk/testing@1.4.4 ** ** ## 快速入门（10 分钟）选择您的框架： * React (Vite) \- ClerkProvider + 钩子 * Next.js 应用程序路由器 \- 中间件 + 异步 auth() * Cloudflare Workers \-后端验证 ** ** ## React（Vite）设置 ### 1\.安装文员 ```bash npm install @clerk/clerk-react ``` **最新版本**：@clerk/clerk-react@5.51.0（2025年10月22日验证） ### 2\.配置 ClerkProvider 更新`src/main.tsx`： ```typescript import React from 'react' import ReactDOM from 'react-dom/client' import { ClerkProvider } from '@clerk/clerk-react' import App from './App.tsx' import './index.css' // 从环境中获取可发布密钥 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY if (!PUBLISHABLE_KEY) { throw new Error('缺少可发布密钥') } ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` **关键**： * Vite中的环境变量使用`VITE_`前缀 * ClerkProvider 必须包装您的整个应用程序 *来源： ### 3\.添加环境变量创建`.env.local`： ```bash VITE_CLERK_PUBLISHABLE_KEY=pk_test_... ``` **安全说明**：只有“VITE_”前缀的变量才会暴露给客户端代码。 ### 4\.使用身份验证挂钩 ```typescript import { useUser, useAuth, useClerk } from '@clerk/clerk-react' function App() { // 获取用户对象（包括电子邮件、元数据等） const { isLoaded, isSignedIn, user } = useUser() // 获取身份验证状态和会话方法 const { userId, sessionId, getToken } = useAuth() // 获取高级操作的 Clerk 实例 const { openSignIn, signOut } = useClerk() // 在渲染依赖于身份验证的 UI 之前始终检查 isLoaded if (!isLoaded) { return Loading... } if (!isSignedIn) { return

职员授权

包含技能