# Web 身份验证（反应） ## 核心模式 ### JWT 令牌存储 **选择和权衡：** 存储| XSS 安全 | CSRF 安全 |最适合 ---|---|---|--- httpOnly cookie |是的 |否（需要 CSRF 令牌）|代币最安全本地存储|没有 |是的 |简单的应用程序，短暂的代币内存（状态）|是的 |是的 |具有刷新功能的非常短暂的令牌 ### 基于 Cookie 的身份验证（推荐） // API客户端设置常量 API = { 异步登录（电子邮件：字符串，密码：字符串）{ const 响应 = 等待 fetch('/api/auth/login', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, 凭证：'include'，//重要：发送/接收cookie body: JSON.stringify({ 电子邮件, 密码 }), }); 返回response.json(); }, 异步注销() { 等待 fetch('/api/auth/logout', { 方法：'POST'，凭据：“包括”， }); }, 异步 getUser() { const 响应 = 等待 fetch('/api/auth/me', { 凭据：“包括”， }); if (!response.ok) throw new Error('未验证'); 返回response.json(); }, }; ### 身份验证上下文模式从 'react' 导入 { createContext, useContext, useEffect, useState, ReactNode }; 界面用户{ id：字符串；电子邮件：字符串；名称：字符串； } 接口 AuthState { 用户：用户 |无效的; 正在加载：布尔值； isAuthenticated：布尔值；登录：（电子邮件：字符串，密码：字符串）=> Promise; 注销：() => Promise; 刷新：() => Promise; } const AuthContext = createContext(空); 导出函数 AuthProvider({ 孩子 }: { 孩子: ReactNode }) { const [用户，setUser] = useState<用户 |空>(空); const [isLoading, setIsLoading] = useState(true); 使用效果（（）=> { // 检查挂载时的身份验证状态检查验证（）； }, []); 异步函数 checkAuth() { 尝试{ const userData = 等待 api.getUser(); setUser(用户数据); } 抓住 { setUser(空); }最后{ setIsLoading(假); } } 异步函数登录（电子邮件：字符串，密码：字符串）{ const { 用户 } =等待 api.login(电子邮件、密码); 设置用户（用户）； } 异步函数注销() { 等待 api.logout(); setUser(空); } 异步函数刷新() { 等待 checkAuth(); } 返回（ {孩子} ）； } 导出函数 useAuth() { const 上下文 = useContext(AuthContext); 如果（！上下文）{ throw new Error('useAuth 必须在 AuthProvider 中使用'); } 返回上下文； } ** ** ## OAuth 模式 ### Google OAuth（网络） // 使用谷歌身份服务从'react'导入{useEffect}；声明全局{ 界面窗口{ 谷歌：任何； } } 函数 GoogleLoginButton() { 使用效果（（）=> { // 加载 Google 身份服务脚本 const script = document.createElement('script'); script.src = 'https://accounts.google.com/gsi/client'; script.async = true; document.body.appendChild(脚本); 脚本.onload = () => { window.google.accounts.id.initialize({ client_id：process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID，回调：handleGoogleResponse， }); window.google.accounts.id.renderButton( document.getElementById('google-signin'), { 主题：'轮廓'，尺寸：'大' } ）； }; 返回（）=> { document.body.removeChild(脚本); }; }, []); 异步函数handleGoogleResponse（响应：{凭据：字符串}）{ // 发送token到后端进行验证 const 结果 = 等待 fetch('/api/auth/google', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, 凭据：“包括”，正文：JSON.stringify（{令牌：response.credential}）， }); 如果（结果.ok）{ window.location.href = '/仪表板'; } } 返回

; } ### NextAuth.js（推荐用于 Next.js） //pages/api/auth/[...nextauth].ts 或 app/api/auth/[...nextauth]/route.ts 从 'next-auth' 导入 NextAuth；从“next-auth/providers/google”导入 GoogleProvider；从“next-auth/providers/credentials”导入 CredentialsProvider；导出常量 authOptions = { 提供者：[ 谷歌提供商({ clientId：process.env.GOOGLE_CLIENT_ID！， clientSecret：process.env.GOOGLE_CLIENT_SECRET！， }), 凭证提供者({ 名称：“凭证”，凭证：{ 电子邮件：{ 标签：'电子邮件'，类型：'电子邮件' }，密码：{ 标签：'密码'，类型：'密码' }， }, 异步授权（凭据）{ // 根据您的数据库验证凭据 const 用户 = 等待 verifyCredentials( 凭据？.电子邮件，凭据？.密码）；返回用户??空； }, }), ], 回调：{ 异步 jwt({ 令牌, 用户 }) { 如果（用户）{ 令牌.id = 用户.id; } 返回令牌； }, 异步会话（{会话，令牌}）{ session.user.id = token.id; 返回会话； }, }, }; 导出默认 NextAuth(authOptions); // 在组件中的使用从'next-auth/react'导入{useSession，signIn，signOut}；函数 AuthButton() { const { 数据：会话，状态 } = useSession(); if (状态 === '正在加载') { 返回<旋转器/>; } 如果（会话）{ 返回（

以 {session.user?.email} 身份登录

）； } 返回（

）； } ** ** ## 受保护的路由 ### 反应路由器从 'react-router-dom' 导入 { Navigate, Outlet, useLocation }; 从'@/contexts/auth'导入{useAuth}；函数受保护的路由（）{ const { isAuthenticated, isLoading } = useAuth(); const 位置 = useLocation(); 如果（正在加载）{ 返回<加载屏幕/>； } if (!isAuthenticated) { // 重定向到登录，保留预期目的地返回 ; } 返回<出口/>; } // 路由器中的使用 <路线> } /> <路由元素={}> <路线路径=“/仪表板”元素={<仪表板/>} /> <路线路径=“/设置”元素= {<设置/>} /> ### Next.js 应用程序路由器 // 中间件.ts 从'next/server'导入{NextResponse}；从 'next/server' 导入类型 { NextRequest }；导出函数中间件（请求：NextRequest）{ const token = request.cookies.get('auth-token'); if (!token && request.nextUrl.pathname.startsWith('/dashboard')) { return NextResponse.redirect(new URL('/login', request.url)); } 返回 NextResponse.next(); } 导出常量配置= { 匹配器：['/dashboard/:path*', '/settings/:path*'], }; // 应用程序/仪表板/layout.tsx 从“下一步/导航”导入{重定向}；从 'next-auth' 导入 { getServerSession }；从 '@/app/api/auth/[...nextauth]/route' 导入 { authOptions }；导出默认异步函数 DashboardLayout({ 孩子们， }：{ 孩子：React.ReactNode； }) { const 会话 = 等待 getServerSession(authOptions); 如果（！会话）{ 重定向（'/登录'）； } 返回<>{孩子}； } ** ** ## 令牌刷新模式 // 具有自动令牌刷新功能的 API 客户端类 ApiClient { 私人刷新Promise：Promise |空=空；异步获取（url：字符串，选项：RequestInit = {}）{ const 响应 = 等待获取（url，{ ...选项，凭据：“包括”， }); if (response.status === 401) { // Token过期，尝试刷新等待 this.refreshToken(); // 重试原始请求返回 fetch(url, { ...选项, 凭证: 'include' }); } 返回响应； } 私有异步刷新令牌（）{ // 刷新请求重复数据删除如果（this.refreshPromise）{ 返回 this.refreshPromise； } this.refreshPromise = fetch('/api/auth/refresh', { 方法：'POST'，凭据：“包括”， }).then(异步（响应）=> { 如果（！response.ok）{ // 刷新失败，注销用户 window.location.href = '/登录'; 抛出新错误（'会话已过期'）； } }).finally(() => { this.refreshPromise = null; }); 返回 this.refreshPromise； } } 导出 const api = new ApiClient(); ** ** ## 表单处理从'react-hook-form'导入{useForm}；从 '@hookform/resolvers/zod' 导入 { zodResolver }；从 'zod' 导入 { z }； const loginSchema = z.object({ email: z.string().email('无效的电子邮件'), 密码: z.string().min(8, '密码必须至少8个字符'), }); type LoginForm = z.infer; 函数登录页面（）{ const { 登录 } = useAuth(); 常量导航 = useNavigate(); const 位置 = useLocation(); 常量{ 注册，处理提交， formState: { 错误, 正在提交 }, 设置错误， } = useForm<登录表单>({ 解析器：zodResolver(loginSchema), }); 异步函数 onSubmit(data: LoginForm) { 尝试{ 等待登录（数据.电子邮件，数据.密码）； // 重定向到预期页面或仪表板 const from = location.state?.from?.pathname || '/仪表板'; 导航（来自，{替换：true}）； } 捕获（错误）{ setError('根', { message: '无效的电子邮件或密码', }); } } 返回（

电子邮件 {errors.email && {errors.email.message}}

密码 {errors.password && {errors.password.message}}

{errors.root &&

{errors.root.message}

} <按钮类型=“提交”禁用= {isSubmitting}> {正在提交？ '正在登录...' : '登录'} ）； } ** ** ## 安全最佳实践 ### CSRF 保护 // 服务器：在响应中包含 CSRF 令牌 // 客户端：发送请求异步函数 fetchWithCSRF(url: string, options: RequestInit = {}) { const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); 返回获取（网址，{ ...选项，标题：{ ...选项.标题， 'X-CSRF-Token'：csrfToken || '', }, 凭据：“包括”， }); } ### 安全标头（服务器） // Next.js next.config.js const securityHeaders = [ { key: 'X-内容类型-选项', 值：'nosniff'， }, { key: 'X-Frame-Options', 值：'拒绝'， }, { key: 'X-XSS-保护', 值：'1；模式=块', }, { key: '严格传输安全', 值：'最大年龄=31536000；包括子域', }, ]; 模块. 导出 = { 异步标头() { 返回[ { 来源：'/：路径*'，标头：安全标头， }, ]; }, }; ** ** ## 常见问题问题 |解决方案 ---|--- Cookie 未发送 |添加 `credentials: 'include'` 来获取 cookie 的 CORS 错误 |服务器必须设置 `Access-Control-Allow-Credentials: true` 刷新时会话丢失 |验证 cookie 设置（域、路径、安全） OAuth 重定向失败 |在提供商控制台中检查重定向 URI localStorage 中的令牌被盗 |移至 httpOnly cookie ** ** ## 后端集成（FastAPI） # 供参考：FastAPI 身份验证端点从 fastapi 导入 FastAPI、响应、取决于、HTTPException 从 fastapi.security 导入 HTTPBearer @app.post(“/api/auth/login”) 异步 def 登录（凭据：LoginRequest，响应：响应）：用户=等待verify_user（凭证.电子邮件，凭证.密码）如果不是用户：引发 HTTPException（status_code=401，详细信息=“无效凭据”）令牌 = create_jwt_token(user.id) 响应.set_cookie( key="auth-token", 值=代币， httponly=真， secure=True, # 仅 HTTPS 同一网站=“宽松”， max_age=60 * 60 * 24 * 7, # 7 天）返回{“用户”：用户} @app.post(“/api/auth/logout”) 异步定义注销（响应：响应）： response.delete_cookie("auth-token") 返回{“成功”：True}

网络认证

包含技能