# Supabase MCP 集成使用 Supabase（基于 PostgreSQL 构建的开源后端即服务平台）构建生产就绪应用程序的综合技能。该技能涵盖身份验证、数据库操作、实时订阅、存储、TypeScript 集成和行级安全模式。 ## 何时使用此技能在以下情况下使用此技能： * 使用 PostgreSQL 后端构建全栈 Web 或移动应用程序 * 实现身份验证（电子邮件、OAuth、魔术链接、MFA）和会话管理 * 创建实时应用程序（聊天、协作、实时仪表板） * 通过图像优化和 CDN 交付来管理文件存储 * 构建具有细粒度授权的多租户SaaS应用程序 * 从 Firebase 迁移到基于 SQL 的后端 * 要求使用 TypeScript 进行类型安全的数据库操作 * 实现数据库授权的行级安全性（RLS） * 构建具有复杂查询、联接和关系的应用程序 * 从数据库模式设置即时 REST/GraphQL API ## 核心概念 ### Supabase 平台架构 Supabase 是一个基于企业级开源组件构建的集成平台： **关键组件：** * **PostgreSQL 数据库**：带扩展的完整 Postgres（PostGIS、pg_vector） * **GoTrue (Auth)** ：基于 JWT 的多个提供商的身份验证 * **PostgREST** ：从数据库模式自动生成 REST API * **实时** ：用于数据库更改、广播和存在的 WebSocket 服务器 * **存储** ：具有 CDN 和图像优化的 S3 兼容文件存储 * **Edge Functions** ：全球分布式无服务器函数（Deno 运行时） **统一客户端库：** 从 '@supabase/supabase-js' 导入 { createClient } const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY) // 所有功能均通过单个客户端 wait supabase.auth.signIn() // 身份验证 wait supabase.from('users').select() // 数据库 supabase.channel('room').subscribe() // 实时 wait supabase.storage.from().upload() // 存储 ### 行级安全性 (RLS) 使用 PostgreSQL 策略的数据库级授权： * 直接在数据库中定义访问规则 * 自动执行所有查询 * 与 JWT 身份验证集成 * 行、列级别的细粒度控制 ### 基于 JWT 的身份验证 Supabase Auth 使用 JSON Web 令牌： * 认证成功后发出 * 自动包含在数据库查询中 * 用于RLS策略评估 * 刷新长时间会话的令牌流 ### 类型安全从数据库模式自动生成 TypeScript 类型： * 从实时数据库生成类型 * 类型安全的查询和突变 * 编译时错误检测 * IDE 自动完成支持 ## Supabase 客户端设置 ### 安装 # npm npm 安装@supabase/supabase-js # 纱线纱线添加@supabase/supabase-js #pnpm pnpm 添加@supabase/supabase-js # 发髻面包添加@supabase/supabase-js ### 环境配置 # .env.local NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... # 用于服务器端操作（保持安全！） SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... **安全注意事项：** 切勿在客户端代码中公开“service_role”密钥。 ### 客户端初始化模式（推荐） // lib/supabase.ts 从 '@supabase/supabase-js' 导入 { createClient, SupabaseClient } 从'./database.types'导入{数据库} 函数验证环境（）{ const url = process.env.NEXT_PUBLIC_SUPABASE_URL const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY 如果（！网址）{ 抛出新错误（'缺少环境变量：NEXT_PUBLIC_SUPABASE_URL'） } 如果（！anonKey）{ 抛出新错误（'缺少环境变量：NEXT_PUBLIC_SUPABASE_ANON_KEY'） } 返回 { url, anonKey } } 让 supabaseInstance: SupabaseClient |空=空导出函数 getSupabaseClient(): SupabaseClient { if (!supabaseInstance) { const { url, anonKey } = validateEnvironment() supabaseInstance = createClient<数据库>(url, anonKey, { 授权：{ 自动刷新令牌：true，持久会话：真，检测SessionInUrl：true }, 全局：{ 标题：{ 'X-应用程序名称': 'MyApp' } } }) } 返回supabase实例 } // 导出单例实例导出 const supabase = getSupabaseClient() ### 配置选项常量选项 = { // 数据库配置数据库：{ schema: 'public' // 默认架构 }, // 认证配置授权：{ autoRefreshToken: true, // 自动刷新令牌 persistSession: true, // 将会话持久保存到 localStorage detectorSessionInUrl: true, // 从 URL 哈希中检测会话 flowType: 'pkce', // 使用 PKCE 流进行 OAuth storage: customStorage, // 自定义存储实现 storageKey: 'sb-auth-token' // 会话的存储密钥 }, // 全局配置全局：{ 标题：{ 'X-应用程序名称': '我的应用程序', 'apikey': SUPABASE_ANON_KEY }, fetch: customFetch // 自定义获取实现 }, // 实时配置实时：{ 参数：{ 每秒事件数：10 }, 超时：10000，心跳间隔：30000 } } const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, 选项) ### 特定于平台的设置 **React Native 与 AsyncStorage：** 从 '@react-native-async-storage/async-storage' 导入 AsyncStorage 从 '@supabase/supabase-js' 导入 { createClient } const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { 授权：{ 存储：异步存储，自动刷新令牌：true，持久会话：真，检测SessionInUrl：假 } }) **React Native 与 Expo SecureStore：** 从“expo-secure-store”导入 * 作为 SecureStore 从 '@supabase/supabase-js' 导入 { createClient } 常量 ExpoSecureStoreAdapter = { getItem: (key: string) => SecureStore.getItemAsync(key), setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value), 删除项目：（键：字符串）=> SecureStore.deleteItemAsync（键） } const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { 授权：{ 存储：ExpoSecureStoreAdapter，自动刷新令牌：true，持久会话：true } }) ## 身份验证和授权 ### 电子邮件/密码验证 **注册：** const { 数据，错误 } = 等待 supabase.auth.signUp({ 电子邮件：'user@example.com'，密码：'安全密码'，选项：{ 数据：{ // 附加用户元数据 display_name: '约翰·多伊', avatar_url: 'https://example.com/avatar.jpg' }, emailRedirectTo: 'https://yourapp.com/welcome' } }) 如果（错误）{ console.error('注册失败：', error.message) 返回 } console.log('用户创建：', data.user) console.log('会话：', data.session) **登录：** const { 数据，错误 } = 等待 supabase.auth.signInWithPassword({ 电子邮件：'user@example.com'，密码：'安全密码' }) 如果（错误）{ console.error('登录失败：', error.message) 返回 } console.log('用户：', data.user) console.log('会话令牌：', data.session?.access_token) ### Magic Link（无密码） const { 数据，错误 } = 等待 supabase.auth.signInWithOtp({ 电子邮件：'user@example.com'，选项：{ emailRedirectTo: 'https://yourapp.com/login', 应该创建用户：true } }) 如果（错误）{ console.error('发送魔法链接失败：', error.message) 返回 } console.log('魔法链接已发送') ### 一次性密码 (OTP) - 电话 // 发送一次性密码 const { 数据，错误 } = 等待 supabase.auth.signInWithOtp({ 电话：'+1234567890', 选项：{ 频道: 'sms' // 或 'whatsapp' } }) // 验证一次性密码 const { 数据：verifyData，错误：verifyError } =等待supabase.auth.verifyOtp（{ 电话：'+1234567890', 令牌：'123456'，类型：“短信” }) ### OAuth（社交登录） const { 数据，错误 } = 等待 supabase.auth.signInWithOAuth({ 提供商：“谷歌”，选项：{ 重定向到：'https://yourapp.com/auth/callback'，范围：“电子邮件个人资料”，查询参数：{ access_type: '离线', 提示：“同意” } } }) // 支持的提供者： // 苹果、谷歌、github、gitlab、bitbucket、discord、facebook、 // twitter、microsoft、linkedin、notion、slack、spotify、twitch 等。 ### 会话管理 // 获取当前会话 const { data: { session }, error } =等待supabase.auth.getSession() 如果（会话）{ console.log('访问令牌：', session.access_token) console.log('用户：', session.user) console.log('过期时间：', session.expires_at) } // 获取当前用户 const { data: { user }, error } =等待supabase.auth.getUser() // 刷新会话 const { 数据，错误 } = 等待 supabase.auth.refreshSession() // 退出 const { 错误 } = 等待 supabase.auth.signOut() ### 身份验证状态更改 const { data: { 订阅 } } = supabase.auth.onAuthStateChange( （事件，会话）=> { console.log('验证事件：', 事件) 开关（事件）{ 案例“SIGNED_IN”： console.log('用户登录：', session?.user) 打破案例“SIGNED_OUT”： console.log('用户已退出') 打破案例“TOKEN_REFRESHED”： console.log('令牌已刷新') 打破案例“USER_UPDATED”： console.log('用户更新：', session?.user) 打破案例“PASSWORD_RECOVERY”： console.log('密码恢复已启动') 打破 } } ） // 清理订阅.取消订阅() ### 用户管理 // 更新用户 const { 数据，错误 } = 等待 supabase.auth.updateUser({ 电子邮件：'newemail@example.com', 密码：'新密码'，数据：{ display_name: '新名称', avatar_url: 'https://example.com/new-avatar.jpg' } }) //重置密码 const { 数据，错误 } = 等待 supabase.auth.resetPasswordForEmail( '用户@example.com', { 重定向到：'https://yourapp.com/reset-password' } ） //重置后更新密码 const { 数据：updateData，错误：updateError } = 等待supabase.auth.updateUser({ 密码：'新安全密码' }) ### 多重身份验证 (MFA) // 注册 MFA const { 数据：enrollData，错误：enrollError } =等待supabase.auth.mfa.enroll({ 因子类型：'totp', 友好名称：“我的电话” }) // 验证注册 const { 数据：verifyData，错误：verifyError } =等待supabase.auth.mfa.verify({ FactorId：enrollData.id，代码：'123456' }) // 挑战（登录期间） const { 数据：challengeData，错误：challengeError } = 等待supabase.auth.mfa.challenge({ 因子 ID: '因子 ID' }) // 验证挑战 const { 数据，错误 } = 等待 supabase.auth.mfa.verify({ 因子 ID: '因子 ID', 挑战ID：挑战数据.id，代码：'123456' }) ## 数据库操作 ### 选择查询 **基本选择：** // 选择所有列 const { 数据，错误 } = 等待 supabase .from('用户') .select() // 选择特定列 const { 数据，错误 } = 等待 supabase .from('用户') .select('id、电子邮件、created_at') **过滤：** // 等于 const { data } = 等待 supabase .from('用户') .select() .eq('状态', '活动') // 不等于 const { data } = 等待 supabase .from('用户') .select() .neq('角色', '管理员') // 大于/小于 const { data } = 等待 supabase .from('产品') .select() .gt('价格', 100) .lte('库存', 10) // 在数组中 const { data } = 等待 supabase .from('用户') .select() .in('id', [1, 2, 3, 4, 5]) // 模式匹配 const { data } = 等待 supabase .from('用户') .select() .like('电子邮件', '%@gmail.com') // 不区分大小写的模式匹配 const { data } = 等待 supabase .from('产品') .select() .ilike('名称', '%laptop%') // 全文搜索 const { data } = 等待 supabase .from('文章') .select() .textSearch('标题', 'postgres 数据库') // 空检查 const { data } = 等待 supabase .from('用户') .select() .is('deleted_at', null) **排序和分页：** // 排序依据 const { data } = 等待 supabase .from('帖子') .select() .order('created_at', { 升序: false }) // 多重排序 const { data } = 等待 supabase .from('用户') .select() .order('last_name', { 升序: true }) .order('first_name', { 升序: true }) // 限制结果 const { data } = 等待 supabase .from('帖子') .select() .限制(10) // 带范围的分页 const { data } = 等待 supabase .from('帖子') .select() .range(0, 9) // 前 10 项（0 索引） **连接和嵌套查询：** // 一对多关系 const { data } = 等待 supabase .from('用户') .选择(` 身份证号，电子邮件，帖子（身份证号，标题，创建时间） `) // 带联结表的多对多 const { data } = 等待 supabase .from('用户') .选择(` 身份证号，电子邮件，用户角色（角色：角色 ( 身份证号，姓名）） `) // 嵌套过滤 const { data } = 等待 supabase .from('用户') .选择(` 身份证号，电子邮件，帖子！内部（身份证号，标题） `) .eq('帖子.已发布', true) **聚合：** // 计数 const { 计数，错误 } = 等待 supabase .from('用户') .select('*', { count: '精确', head: true }) // 过滤计数 const { count } = 等待 supabase .from('用户') .select('*', { count: '精确', head: true }) .eq('状态', '活动') ### 插入操作 // 插入单行 const { 数据，错误 } = 等待 supabase .from('用户') .插入({ 电子邮件：'user@example.com'，名称：“约翰·多伊”，年龄：30 }) .select() // 返回插入的行 // 插入多行 const { 数据，错误 } = 等待 supabase .from('用户') .插入([ { email: 'user1@example.com', name: '用户一' }, { email: 'user2@example.com', name: '用户二' }, { email: 'user3@example.com', name: '用户三' } ]） .select() // Upsert（插入或更新） const { 数据，错误 } = 等待 supabase .from('用户') .upsert({ 编号: 1, 电子邮件：'updated@example.com', name: '更新后的名称' }, { onConflict: 'id' // 冲突列 }) .select() ### 更新操作 // 使用过滤器更新 const { 数据，错误 } = 等待 supabase .from('用户') .update({ 状态: '不活动' }) .eq('last_login', null) .select() // 通过 ID 更新单行 const { 数据，错误 } = 等待 supabase .from('用户') .update({ name: '新名称' }) .eq('id', 用户 ID) .select() .single() // 增加值 const { 数据，错误 } = 等待 supabase .from('个人资料') .update({ 登录计数：supabase.raw('登录计数 + 1') }) .eq('id', 用户 ID) ### 删除操作 // 使用过滤器删除 const { 错误 } = 等待 supabase .from('用户') .delete() .eq('状态', '禁止') // 删除单行 const { 错误 } = 等待 supabase .from('帖子') .delete() .eq('id', postId) // 软删除模式 const { 错误 } = 等待 supabase .from('用户') .update({deleted_at: new Date().toISOString() }) .eq('id', 用户 ID) ### RPC（远程过程调用） // 调用不带参数的函数 const { 数据，错误 } = 等待 supabase .rpc('获取用户计数') // 带参数调用函数 const { 数据，错误 } = 等待 supabase .rpc('计算折扣', { 产品 ID：123，用户 ID：456 }) ## 实时订阅 ### 数据库更改订阅 // 监听所有变化常量通道=supabase .channel('数据库更改') .on( 'postgres_changes', { event: '*', // 所有事件：INSERT、UPDATE、DELETE 模式：'公共'，表：“帖子” }, （有效负载）=> { console.log（'收到更改：'，有效负载） console.log('事件类型：', payload.eventType) console.log('新数据：', Payload.new) console.log('旧数据：', payload.old) } ） .subscribe() // 清理频道.取消订阅() **收听具体事件：** // 仅插入 const insertChannel = supabase .channel('后插入') .on( 'postgres_changes', { 事件：“插入”，模式：'公共'，表：“帖子” }, （有效负载）=> { console.log('新帖子已创建：', Payload.new) } ） .subscribe() // 仅更新 const updateChannel = supabase .channel('更新后') .on( 'postgres_changes', { 事件：“更新”，模式：'公共'，表：“帖子” }, （有效负载）=> { console.log('更新后：', Payload.new) } ） .subscribe() // 过滤特定行的更改常量通道=supabase .channel('用户帖子') .on( 'postgres_changes', { 事件：'*'，模式：'公共'，表：“帖子”，过滤器：`user_id=eq.${userId}` }, （有效负载）=> { console.log('用户帖子已更改：', Payload) } ） .subscribe() ### 广播消息 // 发送广播 const 通道 = supabase.channel('room-1') 频道. 订阅((状态) => { 如果（状态==='已订阅'）{ 频道.发送({ 类型：'广播'，事件：'光标移动'，有效负载：{x：100，y：200，用户：'Alice'} }) } }) // 接收广播常量通道=supabase .channel('房间-1') .on('广播', { event: '光标移动' }, (payload) => { console.log('光标移动：', Payload) }) .subscribe() ### 状态跟踪 // 跟踪用户状态 constchannel = supabase.channel('在线用户') // 设置初始状态频道.订阅（异步（状态）=> { 如果（状态==='已订阅'）{ 等待频道.track({ 用户：'用户1'， online_at: new Date().toISOString(), 状态：“在线” }) } }) // 监听状态变化 Channel.on('存在', { 事件: '同步' }, () => { const 状态 = 通道.presenceState() console.log('在线用户：', state) }) Channel.on('存在', { 事件: '加入' }, ({ newPresences }) => { console.log('用户加入：', newPresences) }) Channel.on('存在', { 事件: '离开' }, ({ leftPresences }) => { console.log('离开的用户：', leftPresences) }) // 清理频道.取消订阅() ## 存储操作 ### 存储桶管理 // 列出桶 const { 数据：存储桶，错误 } = 等待 supabase .存储 .listBuckets() // 创建桶 const { 数据，错误 } = 等待 supabase .存储 .createBucket('头像', { public: false, // 私有存储桶 fileSizeLimit: 1048576, // 1MB 限制 allowedMimeTypes: ['image/png', 'image/jpeg'] }) // 更新桶 const { 数据，错误 } = 等待 supabase .存储 .updateBucket('头像', { 公开：真实 }) // 删除桶 const { 数据，错误 } = 等待 supabase .存储 .deleteBucket('头像') ### 文件上传 // 标准上传 const 文件 = event.target.files[0] const filePath = `${userId}/${Date.now()}-${file.name}` const { 数据，错误 } = 等待 supabase .存储 .from('头像') .upload(文件路径, 文件, { 缓存控制：'3600'，更新插入：假 }) // 上传并跟踪进度 const { 数据，错误 } = 等待 supabase .存储 .from('视频') .upload(文件路径, 文件, { onUploadProgress: (进度) => { const 百分比 = (进度.加载 / 进度.总计) * 100 console.log(`上传进度：${percent.toFixed(2)}%`) } }) ### 文件下载和 URL // 下载文件 const { 数据，错误 } = 等待 supabase .存储 .from('头像') .download('路径/到/文件.jpg') // 获取公共 URL（对于公共存储桶） const { 数据 } = SUPABASE .存储 .from('头像') .getPublicUrl('路径/到/文件.jpg') // 创建签名 URL（用于私有存储桶） const { 数据，错误 } = 等待 supabase .存储 .from('私人文件') .createSignedUrl('path/to/file.pdf', 60) // 60 秒后过期 ### 图像转换 const { 数据 } = SUPABASE .存储 .from('头像') .getPublicUrl('用户头像.jpg', { 变换：{ 宽度：200，高度：200， resize: 'cover', // 或 'contain', 'fill' 质量：80，格式：'webp' } }) ### 文件管理 // 列出文件 const { 数据，错误 } = 等待 supabase .存储 .from('头像') .list('用户-123', { 限制：100，偏移量：0， sortBy: { 列: '名称', 顺序: 'asc' } }) // 删除文件 const { 数据，错误 } = 等待 supabase .存储 .from('头像') .remove(['路径/to/file1.jpg', '路径/to/file2.jpg']) // 移动文件 const { 数据，错误 } = 等待 supabase .存储 .from('头像') .move('旧/路径/文件.jpg', '新/路径/文件.jpg') // 复制文件 const { 数据，错误 } = 等待 supabase .存储 .from('头像') .copy('源/文件.jpg', '目标/文件.jpg') ## TypeScript 集成 ### 生成数据库类型 # 安装 Supabase CLI npm install -g supabase # 登录登录 # 生成类型 supabase gen 类型 typescript --project-id YOUR_PROJECT_ID > database.types.ts ### 使用生成的类型从 '@supabase/supabase-js' 导入 { createClient } 从'./database.types'导入{数据库} // 创建类型化客户端 const supabase = createClient<数据库>( process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY！） // 类型安全查询 const { 数据，错误 } = 等待 supabase .from('用户') .select('id、电子邮件、created_at') .eq('id', 用户 ID) // 数据输入为： // 数组<{ id: 字符串;电子邮件：字符串；创建于：字符串}> |空 // 类型安全插入 const { 数据，错误 } = 等待 supabase .from('帖子') .插入({ 标题：“我的帖子”，内容：'内容在这里'， user_id：用户ID，发表：真实 }) .select() ### 助手类型从'./database.types'导入{数据库} // 获取表行类型类型用户 = 数据库['公共']['表']['用户']['行'] // 获取插入类型类型 NewUser = 数据库['公共']['表']['用户']['插入'] // 获取更新类型类型 UserUpdate = 数据库['公共']['表']['用户']['更新'] // 获取枚举类型类型 UserRole = 数据库['public']['Enums']['user_role'] // 在函数中使用函数createUser（用户：NewUser）：Promise<用户> { // 实现 } ## 行级安全性 (RLS) ### 启用 RLS -- 在表上启用 RLS ALTER TABLE posts 启用行级安全； ### 常见的 RLS 模式 **公共读取访问权限：** 创建策略“公共个人资料对每个人都可见” ON型材对于选择匿名，已验证使用（真实）； **用户只能看到自己的数据：** 创建策略“用户只能看到自己的数据” 上的帖子对于选择已认证 USING (auth.uid() = user_id); **用户只能修改自己的数据：** 创建策略“用户可以插入自己的帖子” 上的帖子用于插入已认证带检查（auth.uid（）= user_id）；创建策略“用户可以更新自己的帖子” 上的帖子更新已认证使用 (auth.uid() = user_id) 带检查（auth.uid（）= user_id）；创建策略“用户可以删除自己的帖子” 上的帖子用于删除已认证 USING (auth.uid() = user_id); **多租户模式：** 创建策略“用户只能查看自己组织的数据” ON 文件对于选择已认证使用（组织 ID IN ( 选择组织 ID 来自用户组织其中 user_id = auth.uid() ））； **基于角色的访问控制：** 创建策略“管理员可以查看所有用户” ON用户对于选择已认证使用（ auth.jwt() ->> '角色' = '管理员' 或者 auth.uid() = id ）； ## 最佳实践 ### 客户端初始化 **使用单例模式：** * 创建单个客户端实例并在应用程序中重复使用 * 避免根据每个请求创建新客户 * 存储在模块级变量或上下文中 ### 错误处理 **始终检查错误：** const { 数据，错误 } = 等待 supabase .from('用户') .select() 如果（错误）{ console.error('获取用户时出错：', error.message) // 适当处理错误返回 } // 安全地使用数据控制台.日志（数据） **使用 throwOnError() 进行 Promise 拒绝：** 尝试{ const { data } = 等待 supabase .from('用户') .insert({ 名称: '约翰' }) .throwOnError() console.log('用户创建：', data) } 捕获（错误）{ console.error('创建用户失败：', error) } ### 安全 **永远不要暴露服务角色密钥：** * 在客户端代码中使用“anon”键 * 仅在服务器端代码中使用 `service_role` 键 * 将服务角色密钥保存在服务器环境变量中 **始终启用 RLS：** * 在所有表上启用 RLS * 为每个表创建适当的策略 * 彻底测试政策 **验证用户输入：** * 永远不要相信客户端数据 * 使用数据库约束和验证 * 在客户端和数据库中验证 ### 性能 **明智地使用选择：** // 不好：获取所有列 const { data } =等待supabase.from('users').select() // 好：只获取需要的列 const { data } = wait supabase.from('users').select('id, email') **使用分页：** // 不好：获取所有行 const { data } =等待supabase.from('posts').select() // 好：对结果进行分页 const { data } = 等待 supabase .from('帖子') .select() .范围(0, 9) .order('created_at', { 升序: false }) **索引数据库列：** * 为经常查询的列添加索引 * 索引外键 * 使用复合索引进行多列查询 ### 连接管理 **重用客户端实例：** * 不要为每个请求创建新的客户端 * 使用单例模式进行客户端初始化 * 考虑服务器端的连接池 **清理订阅：** 使用效果（（）=> { const 通道 = supabase.channel('room-1') 频道.订阅(/* ... */) 返回（）=> { 频道.取消订阅() } }, []) ## 常见模式和工作流程 ### 用户认证流程 // 1. 注册 const { 数据：signUpData，错误：signUpError } =等待supabase.auth.signUp（{ 电子邮件：'user@example.com'，密码：'安全密码' }) // 2. 监听auth状态 supabase.auth.onAuthStateChange((事件，会话) => { 如果（事件==='SIGNED_IN'）{ // 重定向到仪表板 } }) // 3. 保护路由检查 const { data: { session } } =等待supabase.auth.getSession() 如果（！会话）{ // 重定向到登录 } // 4. 退出等待 supabase.auth.signOut() ### CRUD 与 RLS // 在表上启用 RLS /* ALTER TABLE todos 启用行级安全；创建策略“用户可以 CRUD 自己的待办事项” 待办事项为所有人已认证使用 (auth.uid() = user_id) 带检查（auth.uid（）= user_id）； */ // 创建 const { 数据，错误 } = 等待 supabase .from('todos') .插入({ user_id: 会话.用户.id, 标题：“我的待办事项”，已完成：假 }) .select() // 读取（由于 RLS，仅用户自己的待办事项） const { 数据，错误 } = 等待 supabase .from('todos') .select() // 更新 const { 数据，错误 } = 等待 supabase .from('todos') .update({ 完成: true }) .eq('id', todoId) // 删除 const { 错误 } = 等待 supabase .from('todos') .delete() .eq('id', todoId) ### 实时聊天实施从 'react' 导入 { useEffect, useState } 从'@/lib/supabase'导入{supabase} 函数聊天({ roomId, userId }) { const [消息，setMessages] = useState([]) 使用效果（（）=> { // 获取现有消息 const fetchMessages = async () => { const { data } = 等待 supabase .from('消息') .select() .eq('room_id', roomId) .order('created_at', { 升序: true }) if (数据) setMessages(数据) } 获取消息() // 订阅新消息常量通道=supabase .channel(`房间-${roomId}`) .on( 'postgres_changes', { 事件：“插入”，模式：'公共'，表：“消息”，过滤器：`room_id=eq.${roomId}` }, （有效负载）=> { setMessages((上一个) => [...上一个, Payload.new]) } ） .subscribe() 返回（）=> { 频道.取消订阅() } }, [房间ID]) const sendMessage = async (内容: 字符串) => { 等待supabase.from('messages').insert({ room_id: 房间ID, user_id：用户ID，内容 }) } 返回（

{messages.map((msg) => (

{msg.content}

))}

） } ### 文件上传有进度异步函数 uploadAvatar(file: File, userId: string) { const filePath = `${userId}/${Date.now()}-${file.name}` const { 数据，错误 } = 等待 supabase.storage .from('头像') .upload(文件路径, 文件, { 缓存控制：'3600'，更新插入：假， onUploadProgress: (进度) => { const 百分比 = (进度.加载 / 进度.总计) * 100 console.log(`上传：${percent.toFixed(2)}%`) } }) 如果（错误）{ console.error('上传失败：', error.message) 返回空值 } // 获取公共URL const { data: urlData } = supabase.storage .from('头像') .getPublicUrl(文件路径) // 使用头像 URL 更新用户个人资料等待苏帕巴斯 .from('个人资料') .update({ avatar_url: urlData.publicUrl }) .eq('id', 用户 ID) 返回 urlData.publicUrl } ## 故障排除 ### 常见问题 **RLS 阻止查询：** * 检查 RLS 是否启用：`ALTER TABLE table_name ENABLE ROW LEVEL SECURITY;` * 验证策略是否存在并符合您的用例 * 使用不同的用户上下文测试策略 * 对 SELECT/UPDATE/DELETE 使用“USING”子句 * 使用“WITH CHECK”子句进行插入/更新 **身份验证会话不持续：** * 确保配置中的 `persistSession: true` * 检查存储（localStorage）是否可用 * 验证 cookie 未被阻止 * 检查是否启用第三方cookie（用于OAuth） **实时不工作：** * 在 Supabase 仪表板中启用实时表 * 检查RLS策略是否允许订阅 * 验证频道订阅是否成功 * 检查网络/防火墙阻止 WebSockets **类型生成错误：** * 确保 Supabase CLI 已安装并更新 * 验证项目ID是否正确 * 检查与 Supabase 的网络连接 * 尝试使用 `--debug` 标志重新生成类型 ### 调试 RLS 策略 -- 作为特定用户测试策略 SET request.jwt.claims.sub = 'user-uuid-here'; -- 运行查询以查看可见内容从帖子中选择 *； -- 重置为管理员重置 request.jwt.claims.sub; ### 性能问题 **查询速度慢：** * 对经常查询的列添加索引 * 使用`EXPLAIN ANALYZE`来分析查询计划 * 避免获取不必要的列 * 对大型数据集使用分页 **连接太多：** * 使用连接池 * 重用客户端实例 * 关闭未使用的订阅 * 考虑使用 Edge Functions 作为服务器端逻辑 ## 生产部署 ### 环境配置 # 生产.env NEXT_PUBLIC_SUPABASE_URL=https://prod-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=产品匿名密钥 SUPABASE_SERVICE_ROLE_KEY=产品服务角色密钥 # 暂存.env NEXT_PUBLIC_SUPABASE_URL=https://staging-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=暂存匿名密钥 SUPABASE_SERVICE_ROLE_KEY=临时服务角色密钥 ### 数据库迁移使用 Supabase CLI 进行架构迁移： # 初始化迁移 SUPABASE迁移新的create_posts_table # 应用迁移 SUPABASE数据库推送 # 根据更改生成迁移 supabase db diff -f create_users_table ### 监控 * 启用 Supabase 仪表板监控 * 设置错误和性能问题警报 * 监控数据库连接 * 跟踪 API 使用情况和配额 * 设置身份验证事件的日志记录 ### 备份策略 * 在 Supabase 仪表板中启用自动备份 * 配置时间点恢复 * 测试恢复程序 * 定期导出模式和数据 * 将备份存储在单独的位置 ### 扩展考虑因素 * 升级 Supabase 计划以获得更高限额 * 使用数据库连接池 * 实现缓存（Redis等） * 考虑读取副本以应对繁重的读取负载 * 使用边缘函数进行繁重的计算 * 优化数据库索引 * 监控和优化慢查询 ** ** **技能版本**：1.0.0 **最后更新**：2025 年 10 月 **技能类别**：后端即服务、数据库集成、身份验证、实时 **兼容**：React、Next.js、Vue、Angular、React Native、Flutter、Node.js、Deno

Supabase Mcp 集成

包含技能