Supabase 实战指南从登录、RLS 到 Storage 签名链接本文不依赖特定的项目代码侧重于梳理使用 Supabase 过程中通用的核心逻辑与踩坑记录。无论你是在做班级同学录、个人博客还是其他小应用这些经验都值得参考。本文源于作者一次制作同学录网页的经验DeepSeek辅助整理。不喜勿喷。特别说明关于 Supabase 后台界面Supabase 的网页后台Dashboard更新频繁你看到的界面可能和教程中的截图不完全一致。请根据功能描述去寻找对应的菜单或按钮而不是死记硬背“点击左侧第 X 个图标”。例如创建“行级安全策略”的功能可能位于Authentication-Policies下也可能在Table Editor的右上角。遇到找不到的情况善用后台的搜索框或查阅最新的官方文档。一、为什么选 Supabase对于前端开发者或小型独立项目来说自己搭建完整的后端登录注册、JWT 鉴权、数据库 API、文件上传非常耗时。Supabase提供了开箱即用的 PostgreSQL 数据库、自动生成的 REST API、用户认证和文件存储。最关键的是——它开源免费额度对于学习和小型项目来说绰绰有余。二、核心功能实现与通用踩坑1. 自定义登录验证灵活使用 RPCSupabase 自带邮箱密码登录但很多项目如班级系统需要使用“学号姓名”或“工号验证码”等自定义方式验证。此时可以不使用 Supabase 的 Auth 模块而是创建一张用户表通过RPC 函数进行验证。通用建表示例CREATETABLEusers(idTEXTPRIMARYKEY,-- 可以是学号、工号等nameTEXTNOTNULL);验证函数模板RPCCREATEORREPLACEFUNCTIONverify_user(input_idTEXT,input_nameTEXT)RETURNSJSONLANGUAGEplpgsql SECURITYDEFINERAS$$DECLAREfound_user RECORD;BEGINSELECTid,nameINTOfound_userFROMusersWHEREidinput_idANDnameinput_name;IFfound_user.idISNULLTHENRETURNjson_build_object(success,false,message,ID或姓名错误);ELSERETURNjson_build_object(success,true,user,json_build_object(id,found_user.id,name,found_user.name));ENDIF;END;$$;GRANTEXECUTEONFUNCTIONverify_userTOanon;前端调用方式const{data,error}awaitsupabaseClient.rpc(verify_user,{input_id:id,input_name:name}); 踩坑提醒使用自定义登录意味着supabase.auth.getSession()无法获取 JWT因此后续所有直接查询表的操作都会被 RLS 拦截。解决方案有两种方案一推荐所有数据访问都通过 RPC 函数SECURITY DEFINER绕过 RLS进行。方案二使用anon密钥并在函数内部做权限校验。2. RLS行级安全策略—— 新手最容易踩的坑Supabase 的 RLS 默认是关闭的但生产环境必须开启。许多开发者开启 RLS 后发现前端查不到数据以为 Supabase 出错了这通常是因为RLS 默认拒绝所有访问你需要显式创建策略才能放行。策略配置示例-- 开启 RLSALTERTABLEusersENABLEROWLEVELSECURITY;-- 阻止所有直接 SELECT仅允许通过 RPC 访问CREATEPOLICYDeny direct selectONusersFORSELECTUSING(false); 通用经验如果某张表只通过 RPC 函数读写可以直接用USING (false)锁死直接访问。如果需要允许前端直接SELECT则需创建相应的策略如USING (auth.role() authenticated)。3. RPC 函数返回复杂 JSON一次性获取文章 上下篇在需要展示文章或动态详情页时前端通常需要当前内容、上一篇和下一篇的标题。使用 RPC 函数可以一次性返回所有数据减少前端请求次数。通用函数模板CREATEORREPLACEFUNCTIONget_article_with_nav(p_user_idTEXT,p_article_idBIGINT)RETURNSJSON SECURITYDEFINERAS$$DECLAREcurrent_article JSON;prev_article JSON;next_article JSON;BEGIN-- 1. 权限校验用户必须存在IFNOTEXISTS(SELECT1FROMusersWHEREidp_user_id)THENRETURNjson_build_object(success,false,message,无权限);ENDIF;-- 2. 获取当前文章SELECTrow_to_json(a)INTOcurrent_articleFROMarticles aWHEREa.idp_article_id;IFcurrent_articleISNULLTHENRETURNjson_build_object(success,false,message,文章不存在);ENDIF;-- 3. 获取上一篇id 小于当前的最大值SELECTrow_to_json(a)INTOprev_articleFROMarticles aWHEREa.idp_article_idORDERBYa.idDESCLIMIT1;-- 4. 获取下一篇id 大于当前的最小值SELECTrow_to_json(a)INTOnext_articleFROMarticles aWHEREa.idp_article_idORDERBYa.idASCLIMIT1;RETURNjson_build_object(success,true,article,current_article,prev,prev_article,next,next_article);END;$$;GRANTEXECUTEONFUNCTIONget_article_with_navTOanon; 踩坑提醒使用json_agg时如果子查询返回空结果是NULL而不是空数组。用COALESCE(result_json, []::json)可以让前端统一处理空数据避免报错。4. Storage 私有桶 签名 URL安全文件下载文件存储的安全性是常见需求。Supabase 支持将存储桶设置为“私有”并通过生成签名 URL来实现临时授权访问。判断数据库函数是否存在在 SQL Editor 中执行SELECT proname FROM pg_proc WHERE proname create_signed_url;如果返回空说明数据库函数不可用应改用前端 SDK 方式。前端生成签名链接推荐方式const{data,error}awaitsupabaseClient.storage.from(your-bucket-name).createSignedUrl(path/to/file.pdf,300);// 300秒有效期RLS 策略配置-- 允许已登录用户生成签名 URLCREATEPOLICYAllow authenticated to generate signed URLsONstorage.objectsFORSELECTUSING(auth.role()authenticated); 踩坑提醒如果createSignedUrl返回 400Object not found通常是因为存储桶名称或文件路径错误区分大小写。请仔细核对存储桶名称、文件路径及文件是否真实存在。5. 登录状态管理sessionStorage 回跳使用自定义登录时推荐使用sessionStorage管理登录状态关闭标签页即失效。同时利用backUrl机制让用户登录后回到之前访问的页面提升体验。拦截脚本放在受保护页面的head顶部if(sessionStorage.getItem(is_logged_in)!true){sessionStorage.setItem(backUrl,location.href);window.location.href/login.html;}登录成功后的跳转逻辑constbackUrlsessionStorage.getItem(backUrl);sessionStorage.removeItem(backUrl);window.location.hrefbackUrl!backUrl.includes(login.html)?backUrl:index.html; 踩坑提醒sessionStorage不能跨标签页共享。如果需要在新标签页保持登录可改用localStorage但需注意localStorage存在 XSS 读取风险。三、免费额度与硬限制Supabase 免费计划对大多数个人项目非常友好资源免费额度数据库大小500 MB / 项目月活跃用户50,000出站流量5 GB / 月文件存储1 GBAPI 请求无限有速率限制⚠️ 特别提醒单文件上传上限为50 MB免费计划。如果需要上传超大文件需考虑分片上传或升级 Pro 计划。并发连接数限制为 200需避免在短时间内发起过多并发请求。严禁在前端使用service_role密钥该密钥拥有最高权限一旦泄露数据库将完全失控。四、总结与建议什么时候用 Supabase✅ 快速验证想法 / MVP✅ 学生项目、黑客松✅ 独立开发者的小型产品月活几千✅ 前端开发者想独立完成全栈项目什么时候别用❌ 超高并发千万级日活❌ 复杂的长事务 / 跨库操作核心经验一句话总结Supabase 的安全核心是 RLS 策略和 RPC 函数的权限校验而非前端拦截。前端的一切都可被绕过但数据库的 RLS 是最后一道防线。如果你也在用 Supabase 做项目遇到了什么坑欢迎在评论区交流。创作不易点个赞加个关注再走吧~~ Supabase 实战指南：从登录、RLS 到 Storage 签名链接
Supabase 实战指南从登录、RLS 到 Storage 签名链接本文不依赖特定的项目代码侧重于梳理使用 Supabase 过程中通用的核心逻辑与踩坑记录。无论你是在做班级同学录、个人博客还是其他小应用这些经验都值得参考。本文源于作者一次制作同学录网页的经验DeepSeek辅助整理。不喜勿喷。特别说明关于 Supabase 后台界面Supabase 的网页后台Dashboard更新频繁你看到的界面可能和教程中的截图不完全一致。请根据功能描述去寻找对应的菜单或按钮而不是死记硬背“点击左侧第 X 个图标”。例如创建“行级安全策略”的功能可能位于Authentication-Policies下也可能在Table Editor的右上角。遇到找不到的情况善用后台的搜索框或查阅最新的官方文档。一、为什么选 Supabase对于前端开发者或小型独立项目来说自己搭建完整的后端登录注册、JWT 鉴权、数据库 API、文件上传非常耗时。Supabase提供了开箱即用的 PostgreSQL 数据库、自动生成的 REST API、用户认证和文件存储。最关键的是——它开源免费额度对于学习和小型项目来说绰绰有余。二、核心功能实现与通用踩坑1. 自定义登录验证灵活使用 RPCSupabase 自带邮箱密码登录但很多项目如班级系统需要使用“学号姓名”或“工号验证码”等自定义方式验证。此时可以不使用 Supabase 的 Auth 模块而是创建一张用户表通过RPC 函数进行验证。通用建表示例CREATETABLEusers(idTEXTPRIMARYKEY,-- 可以是学号、工号等nameTEXTNOTNULL);验证函数模板RPCCREATEORREPLACEFUNCTIONverify_user(input_idTEXT,input_nameTEXT)RETURNSJSONLANGUAGEplpgsql SECURITYDEFINERAS$$DECLAREfound_user RECORD;BEGINSELECTid,nameINTOfound_userFROMusersWHEREidinput_idANDnameinput_name;IFfound_user.idISNULLTHENRETURNjson_build_object(success,false,message,ID或姓名错误);ELSERETURNjson_build_object(success,true,user,json_build_object(id,found_user.id,name,found_user.name));ENDIF;END;$$;GRANTEXECUTEONFUNCTIONverify_userTOanon;前端调用方式const{data,error}awaitsupabaseClient.rpc(verify_user,{input_id:id,input_name:name}); 踩坑提醒使用自定义登录意味着supabase.auth.getSession()无法获取 JWT因此后续所有直接查询表的操作都会被 RLS 拦截。解决方案有两种方案一推荐所有数据访问都通过 RPC 函数SECURITY DEFINER绕过 RLS进行。方案二使用anon密钥并在函数内部做权限校验。2. RLS行级安全策略—— 新手最容易踩的坑Supabase 的 RLS 默认是关闭的但生产环境必须开启。许多开发者开启 RLS 后发现前端查不到数据以为 Supabase 出错了这通常是因为RLS 默认拒绝所有访问你需要显式创建策略才能放行。策略配置示例-- 开启 RLSALTERTABLEusersENABLEROWLEVELSECURITY;-- 阻止所有直接 SELECT仅允许通过 RPC 访问CREATEPOLICYDeny direct selectONusersFORSELECTUSING(false); 通用经验如果某张表只通过 RPC 函数读写可以直接用USING (false)锁死直接访问。如果需要允许前端直接SELECT则需创建相应的策略如USING (auth.role() authenticated)。3. RPC 函数返回复杂 JSON一次性获取文章 上下篇在需要展示文章或动态详情页时前端通常需要当前内容、上一篇和下一篇的标题。使用 RPC 函数可以一次性返回所有数据减少前端请求次数。通用函数模板CREATEORREPLACEFUNCTIONget_article_with_nav(p_user_idTEXT,p_article_idBIGINT)RETURNSJSON SECURITYDEFINERAS$$DECLAREcurrent_article JSON;prev_article JSON;next_article JSON;BEGIN-- 1. 权限校验用户必须存在IFNOTEXISTS(SELECT1FROMusersWHEREidp_user_id)THENRETURNjson_build_object(success,false,message,无权限);ENDIF;-- 2. 获取当前文章SELECTrow_to_json(a)INTOcurrent_articleFROMarticles aWHEREa.idp_article_id;IFcurrent_articleISNULLTHENRETURNjson_build_object(success,false,message,文章不存在);ENDIF;-- 3. 获取上一篇id 小于当前的最大值SELECTrow_to_json(a)INTOprev_articleFROMarticles aWHEREa.idp_article_idORDERBYa.idDESCLIMIT1;-- 4. 获取下一篇id 大于当前的最小值SELECTrow_to_json(a)INTOnext_articleFROMarticles aWHEREa.idp_article_idORDERBYa.idASCLIMIT1;RETURNjson_build_object(success,true,article,current_article,prev,prev_article,next,next_article);END;$$;GRANTEXECUTEONFUNCTIONget_article_with_navTOanon; 踩坑提醒使用json_agg时如果子查询返回空结果是NULL而不是空数组。用COALESCE(result_json, []::json)可以让前端统一处理空数据避免报错。4. Storage 私有桶 签名 URL安全文件下载文件存储的安全性是常见需求。Supabase 支持将存储桶设置为“私有”并通过生成签名 URL来实现临时授权访问。判断数据库函数是否存在在 SQL Editor 中执行SELECT proname FROM pg_proc WHERE proname create_signed_url;如果返回空说明数据库函数不可用应改用前端 SDK 方式。前端生成签名链接推荐方式const{data,error}awaitsupabaseClient.storage.from(your-bucket-name).createSignedUrl(path/to/file.pdf,300);// 300秒有效期RLS 策略配置-- 允许已登录用户生成签名 URLCREATEPOLICYAllow authenticated to generate signed URLsONstorage.objectsFORSELECTUSING(auth.role()authenticated); 踩坑提醒如果createSignedUrl返回 400Object not found通常是因为存储桶名称或文件路径错误区分大小写。请仔细核对存储桶名称、文件路径及文件是否真实存在。5. 登录状态管理sessionStorage 回跳使用自定义登录时推荐使用sessionStorage管理登录状态关闭标签页即失效。同时利用backUrl机制让用户登录后回到之前访问的页面提升体验。拦截脚本放在受保护页面的head顶部if(sessionStorage.getItem(is_logged_in)!true){sessionStorage.setItem(backUrl,location.href);window.location.href/login.html;}登录成功后的跳转逻辑constbackUrlsessionStorage.getItem(backUrl);sessionStorage.removeItem(backUrl);window.location.hrefbackUrl!backUrl.includes(login.html)?backUrl:index.html; 踩坑提醒sessionStorage不能跨标签页共享。如果需要在新标签页保持登录可改用localStorage但需注意localStorage存在 XSS 读取风险。三、免费额度与硬限制Supabase 免费计划对大多数个人项目非常友好资源免费额度数据库大小500 MB / 项目月活跃用户50,000出站流量5 GB / 月文件存储1 GBAPI 请求无限有速率限制⚠️ 特别提醒单文件上传上限为50 MB免费计划。如果需要上传超大文件需考虑分片上传或升级 Pro 计划。并发连接数限制为 200需避免在短时间内发起过多并发请求。严禁在前端使用service_role密钥该密钥拥有最高权限一旦泄露数据库将完全失控。四、总结与建议什么时候用 Supabase✅ 快速验证想法 / MVP✅ 学生项目、黑客松✅ 独立开发者的小型产品月活几千✅ 前端开发者想独立完成全栈项目什么时候别用❌ 超高并发千万级日活❌ 复杂的长事务 / 跨库操作核心经验一句话总结Supabase 的安全核心是 RLS 策略和 RPC 函数的权限校验而非前端拦截。前端的一切都可被绕过但数据库的 RLS 是最后一道防线。如果你也在用 Supabase 做项目遇到了什么坑欢迎在评论区交流。创作不易点个赞加个关注再走吧~~