5分钟搭建 Supabase 数据库从建表到 RLS 策略为 Refine 管理后台备好后端【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineSupabase 是一款基于 PostgreSQL 的开源后端即服务BaaS平台集数据库、认证、存储和自动生成 API 于一体。本指南完全围绕Supabase 数据库的搭建展开创建项目、设计表结构、建立外键关系、插入示例数据并最终启用 REST API 与行级安全RLS策略。读完本文你将拥有一个可被 Refine 直接消费的、带关系与约束的生产级数据模型为后续自动生成列表、创建、编辑等管理后台页面打好基础。本文不涉及前端与 API 调用细节只专注数据库侧的实操——这也是后续连接 Refine 时最重要的前置步骤。Step 1创建 Supabase 项目打开 Supabase 官网点击Start your project。你可以使用 GitHub 账号或任意邮箱登录。进入 Dashboard 后点击New project并填写以下信息配置项说明Name项目名称任意填写例如team-adminPassword数据库密码请务必妥善保存Region选择离你或你的用户最近的区域点击Create new project后大约 30 秒内你就能得到一个运行在云端的 PostgreSQL 数据库并且开箱即用地附带认证、存储和即时 API。创建完成后会进入项目 Dashboard核心功能区包括Table Editor——以可视化方式管理数据库结构Authentication——添加用户与权限Storage——上传和管理文件Edge Functions——运行自定义后端逻辑本指南的后续步骤都将在Table Editor中完成。Step 2认识 Table EditorTable Editor 是设计数据模型的地方。你不需要写 SQL——当然也可以写——Supabase 提供了干净的 UI 让你可视化地定义一切。每一张表都像一张电子表格但带有类型、约束和关系。创建新表时你需要定义表名Table name列Columns即字段数据类型Data typestext、integer、timestamp等默认值与约束Default values constraints关系Relationships即外键Supabase 会在底层自动生成并处理对应的 SQL。你在 Table Editor 里构建的一切都会立即通过 REST API 和 GraphQL 对外暴露前提是策略允许见下文 RLS 部分。Row Level SecurityRLS与策略速览使用 Table Editor 创建表时Row Level Security (RLS)默认是开启的。当 RLS 开启且没有任何策略Policies时任何通过 REST 或 GraphQL API使用公开的anon密钥发起的请求都不会返回任何行。策略Policies是 PostgreSQL 规则它们相当于为每个操作SELECT、INSERT、UPDATE、DELETE隐式添加的WHERE子句。你需要在后面添加策略来有选择地开放访问。角色映射关系如下anon没有携带用户 JWT 的请求仅使用公开密钥authenticated携带有效用户 JWT 的请求包括通过 Supabase Auth 创建的匿名会话这些会话同样使用authenticated角色你可以随时在表的Policies标签页中查看或修改 RLS。本指南先聚焦表结构等结构就绪后再添加策略。Step 3创建你的第一张表我们来创建一张简单的employees表——这是后续在 Refine 中常见的资源类型。在Table Editor中点击New Table。命名为employees。添加以下列ColumnTypeDefault说明iduuidgen_random_uuid()主键nametext—员工姓名roletext—职位或头衔salarynumeric(12,2)—可选薪资字段若需严格金额运算建议用整数存储最小货币单位created_attimestamptznow()记录创建时间小提示Table Editor 中的Enable Row Level Security开关默认是开启的。请保持开启状态——在添加显式策略之前你的表都是受保护的。点击Save后表会被立即创建并在策略允许的情况下通过 REST 对外可用。Step 4添加关联表再创建一张departments表用来演示关系外键是如何工作的。点击New Table命名为departments。添加ColumnTypeDefaultiduuidgen_random_uuid()nametext—接下来回到employees表点击Add Column添加名为department_id的列类型设置为uuid在Foreign Key下选择departments → id为更安全的删除行为将外键行为设置为ON DELETE SET NULL再次点击Save。至此你建立了第一个关系每个员工都属于一个部门。Supabase 会自动处理引用完整性并更新你的 schema。这样的结构已经可以被 Refine 后续分析并为你生成可用的列表、创建和编辑页面。Step 5插入示例数据在Table Editor中点击departments表选择Insert Row添加几条示例数据idname(auto)Engineering(auto)Marketing(auto)HR然后进入employees表插入idnamerolesalarydepartment_id(auto)AliceEngineer85000(Engineering 的 id)(auto)BobHR Specialist60000(HR 的 id)现在你的数据已经上线。你可以直接在 Dashboard 中查看、编辑和筛选它们也可以在SQL Editor标签页中用 SQL 查询。Step 6探索 SQL Editor虽然 Table Editor 是可视化的但 Supabase 同样支持完整的 PostgreSQL SQL。点击侧边栏的SQL Editor标签页即可。在这里你可以运行查询例如SELECT * FROM employees;创建视图views、触发器triggers和函数functions保存并对 SQL 脚本进行版本管理例如在插入了departments并用真实的department_id关联员工之后试试这条查询SELECT e.name, e.role, d.name AS department FROM public.employees e LEFT JOIN public.departments d ON e.department_id d.id;警告Relation not found (42P01)如果看到ERROR: 42P01: relation public.employees does not exist确认创建表时点击了 Save。确认 schema 是public默认值且表名为小写employees。刷新浏览器标签页——有时 SQL Editor 的元数据会滞后。确认你正处于创建该表的同一项目中。小提示没有结果或 department 为 NULLLEFT JOIN会保留尚未设置department_id的员工。想看到部门名称可以编辑员工记录把正确部门的 UUID 粘贴到department_id字段中。这种灵活性意味着你可以构建出 Refine或任何前端能直接使用的关联结构。Step 7启用 API 与策略你在暴露的 schema 中创建的每张表都会自动获得一个 REST 端点例如https://project-ref.supabase.co/rest/v1/employeesAPI 示例与密钥可以在Project Settings → API Docs中查看。由于 RLS 是开启的你必须先添加策略数据才能对外可见。在表的Policies标签页中打开employees→ Policies → New Policy。选择操作SELECT。模板选择 Allow authenticated users或自定义。保存。UI 会展示对应的 SQL 供参考。生成的读策略如下create policy Authenticated can read employees on public.employees for select to authenticated using (true);插入策略允许已认证用户添加行create policy Enable insert for authenticated users only on public.employees for insert to authenticated with check (true);可选仅限开发环境更宽泛的读访问create policy Dev read employees (anon authenticated) on public.employees for select to anon, authenticated using (true);在生产环境前请务必移除这些宽松策略。角色细节再强调一下没有 JWT 的请求使用anon角色。已认证的用户会话包括 Supabase 的匿名认证会话映射到authenticated。未认证请求的auth.uid()为NULL——可以结合auth.uid() IS NOT NULL之类的检查来增强清晰度。策略配置完成后REST 调用示例curl -H apikey: $SUPABASE_ANON_KEY \ -H Authorization: Bearer $USER_JWT \ https://project-ref.supabase.co/rest/v1/employees?select*之后你还可以叠加更细粒度的策略行归属、基于角色的过滤等。仓库视角Refine 如何消费这张 Supabase 数据库数据库就绪后把目光转回本仓库看看 Refine 是如何消费这张表的。仓库中的 Supabase 集成包位于 packages/supabase其入口 src/index.ts 统一导出了createClient、dataProvider与liveProvider三个核心能力import { dataProvider, liveProvider, createClient } from refinedev/supabase; const supabaseClient createClient(SUPABASE_URL, SUPABASE_KEY); const App () { return ( Refine dataProvider{dataProvider(supabaseClient)} liveProvider{liveProvider(supabaseClient)} /* ... */ {/* ... */} /Refine ); };Data Provider表结构直接映射为 CRUD 操作在 packages/supabase/src/dataProvider/index.ts 中dataProvider把getList、getOne、create、update、deleteOne等 Refine 数据方法翻译成对 Supabase 客户端链式查询的调用。几个值得关注的细节分页getList默认currentPage 1、pageSize 10、mode server通过query.range()实现服务端分页见 dataProvider/index.ts。schema 支持通过meta.schema可切换非publicschemasupabaseClient.schema(meta.schema)。关联查询排序时可解析foreignTable.field形式实现跨表排序示例中meta.select传入*, categories(title)即直接拉起关联字段。过滤器映射Refine 的CrudFilter运算符由 generateFilter.ts 逐条转换为 Supabase 查询例如contains→ilike(%value%)、between→gte(...).lte(...)运算符名映射见 mapOperator.ts。Live Provider基于 Postgres 实时变更订阅packages/supabase/src/liveProvider/index.ts 利用 Supabase 的postgres_changes实时通道把数据库中的INSERT/UPDATE/DELETE事件推送给 Refine 前端。它支持通过params.filters过滤订阅、通过params.ids只关注特定记录并监听默认publicschema 下的指定表——也就是说你在 Table Editor 里定义的表结构天然就是实时订阅的订阅源。开箱即用的示例项目仓库中的 examples/data-provider-supabase 是一个可直接运行的完整示例其 Supabase 客户端初始化见 src/utility/supabaseClient.ts页面代码位于 src/pages/posts。以列表页 list.tsx 为例它通过useTable的meta.select声明关联字段、配合useSelect加载分类下拉展示了数据库关系如何直接映射成表格列、筛选器和表单选项。参考 README 运行示例npm create refine-applatest -- --example contenteditable="false">【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 5分钟搭建 Supabase 数据库：从建表到 RLS 策略，为 Refine 管理后台备好后端
5分钟搭建 Supabase 数据库从建表到 RLS 策略为 Refine 管理后台备好后端【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineSupabase 是一款基于 PostgreSQL 的开源后端即服务BaaS平台集数据库、认证、存储和自动生成 API 于一体。本指南完全围绕Supabase 数据库的搭建展开创建项目、设计表结构、建立外键关系、插入示例数据并最终启用 REST API 与行级安全RLS策略。读完本文你将拥有一个可被 Refine 直接消费的、带关系与约束的生产级数据模型为后续自动生成列表、创建、编辑等管理后台页面打好基础。本文不涉及前端与 API 调用细节只专注数据库侧的实操——这也是后续连接 Refine 时最重要的前置步骤。Step 1创建 Supabase 项目打开 Supabase 官网点击Start your project。你可以使用 GitHub 账号或任意邮箱登录。进入 Dashboard 后点击New project并填写以下信息配置项说明Name项目名称任意填写例如team-adminPassword数据库密码请务必妥善保存Region选择离你或你的用户最近的区域点击Create new project后大约 30 秒内你就能得到一个运行在云端的 PostgreSQL 数据库并且开箱即用地附带认证、存储和即时 API。创建完成后会进入项目 Dashboard核心功能区包括Table Editor——以可视化方式管理数据库结构Authentication——添加用户与权限Storage——上传和管理文件Edge Functions——运行自定义后端逻辑本指南的后续步骤都将在Table Editor中完成。Step 2认识 Table EditorTable Editor 是设计数据模型的地方。你不需要写 SQL——当然也可以写——Supabase 提供了干净的 UI 让你可视化地定义一切。每一张表都像一张电子表格但带有类型、约束和关系。创建新表时你需要定义表名Table name列Columns即字段数据类型Data typestext、integer、timestamp等默认值与约束Default values constraints关系Relationships即外键Supabase 会在底层自动生成并处理对应的 SQL。你在 Table Editor 里构建的一切都会立即通过 REST API 和 GraphQL 对外暴露前提是策略允许见下文 RLS 部分。Row Level SecurityRLS与策略速览使用 Table Editor 创建表时Row Level Security (RLS)默认是开启的。当 RLS 开启且没有任何策略Policies时任何通过 REST 或 GraphQL API使用公开的anon密钥发起的请求都不会返回任何行。策略Policies是 PostgreSQL 规则它们相当于为每个操作SELECT、INSERT、UPDATE、DELETE隐式添加的WHERE子句。你需要在后面添加策略来有选择地开放访问。角色映射关系如下anon没有携带用户 JWT 的请求仅使用公开密钥authenticated携带有效用户 JWT 的请求包括通过 Supabase Auth 创建的匿名会话这些会话同样使用authenticated角色你可以随时在表的Policies标签页中查看或修改 RLS。本指南先聚焦表结构等结构就绪后再添加策略。Step 3创建你的第一张表我们来创建一张简单的employees表——这是后续在 Refine 中常见的资源类型。在Table Editor中点击New Table。命名为employees。添加以下列ColumnTypeDefault说明iduuidgen_random_uuid()主键nametext—员工姓名roletext—职位或头衔salarynumeric(12,2)—可选薪资字段若需严格金额运算建议用整数存储最小货币单位created_attimestamptznow()记录创建时间小提示Table Editor 中的Enable Row Level Security开关默认是开启的。请保持开启状态——在添加显式策略之前你的表都是受保护的。点击Save后表会被立即创建并在策略允许的情况下通过 REST 对外可用。Step 4添加关联表再创建一张departments表用来演示关系外键是如何工作的。点击New Table命名为departments。添加ColumnTypeDefaultiduuidgen_random_uuid()nametext—接下来回到employees表点击Add Column添加名为department_id的列类型设置为uuid在Foreign Key下选择departments → id为更安全的删除行为将外键行为设置为ON DELETE SET NULL再次点击Save。至此你建立了第一个关系每个员工都属于一个部门。Supabase 会自动处理引用完整性并更新你的 schema。这样的结构已经可以被 Refine 后续分析并为你生成可用的列表、创建和编辑页面。Step 5插入示例数据在Table Editor中点击departments表选择Insert Row添加几条示例数据idname(auto)Engineering(auto)Marketing(auto)HR然后进入employees表插入idnamerolesalarydepartment_id(auto)AliceEngineer85000(Engineering 的 id)(auto)BobHR Specialist60000(HR 的 id)现在你的数据已经上线。你可以直接在 Dashboard 中查看、编辑和筛选它们也可以在SQL Editor标签页中用 SQL 查询。Step 6探索 SQL Editor虽然 Table Editor 是可视化的但 Supabase 同样支持完整的 PostgreSQL SQL。点击侧边栏的SQL Editor标签页即可。在这里你可以运行查询例如SELECT * FROM employees;创建视图views、触发器triggers和函数functions保存并对 SQL 脚本进行版本管理例如在插入了departments并用真实的department_id关联员工之后试试这条查询SELECT e.name, e.role, d.name AS department FROM public.employees e LEFT JOIN public.departments d ON e.department_id d.id;警告Relation not found (42P01)如果看到ERROR: 42P01: relation public.employees does not exist确认创建表时点击了 Save。确认 schema 是public默认值且表名为小写employees。刷新浏览器标签页——有时 SQL Editor 的元数据会滞后。确认你正处于创建该表的同一项目中。小提示没有结果或 department 为 NULLLEFT JOIN会保留尚未设置department_id的员工。想看到部门名称可以编辑员工记录把正确部门的 UUID 粘贴到department_id字段中。这种灵活性意味着你可以构建出 Refine或任何前端能直接使用的关联结构。Step 7启用 API 与策略你在暴露的 schema 中创建的每张表都会自动获得一个 REST 端点例如https://project-ref.supabase.co/rest/v1/employeesAPI 示例与密钥可以在Project Settings → API Docs中查看。由于 RLS 是开启的你必须先添加策略数据才能对外可见。在表的Policies标签页中打开employees→ Policies → New Policy。选择操作SELECT。模板选择 Allow authenticated users或自定义。保存。UI 会展示对应的 SQL 供参考。生成的读策略如下create policy Authenticated can read employees on public.employees for select to authenticated using (true);插入策略允许已认证用户添加行create policy Enable insert for authenticated users only on public.employees for insert to authenticated with check (true);可选仅限开发环境更宽泛的读访问create policy Dev read employees (anon authenticated) on public.employees for select to anon, authenticated using (true);在生产环境前请务必移除这些宽松策略。角色细节再强调一下没有 JWT 的请求使用anon角色。已认证的用户会话包括 Supabase 的匿名认证会话映射到authenticated。未认证请求的auth.uid()为NULL——可以结合auth.uid() IS NOT NULL之类的检查来增强清晰度。策略配置完成后REST 调用示例curl -H apikey: $SUPABASE_ANON_KEY \ -H Authorization: Bearer $USER_JWT \ https://project-ref.supabase.co/rest/v1/employees?select*之后你还可以叠加更细粒度的策略行归属、基于角色的过滤等。仓库视角Refine 如何消费这张 Supabase 数据库数据库就绪后把目光转回本仓库看看 Refine 是如何消费这张表的。仓库中的 Supabase 集成包位于 packages/supabase其入口 src/index.ts 统一导出了createClient、dataProvider与liveProvider三个核心能力import { dataProvider, liveProvider, createClient } from refinedev/supabase; const supabaseClient createClient(SUPABASE_URL, SUPABASE_KEY); const App () { return ( Refine dataProvider{dataProvider(supabaseClient)} liveProvider{liveProvider(supabaseClient)} /* ... */ {/* ... */} /Refine ); };Data Provider表结构直接映射为 CRUD 操作在 packages/supabase/src/dataProvider/index.ts 中dataProvider把getList、getOne、create、update、deleteOne等 Refine 数据方法翻译成对 Supabase 客户端链式查询的调用。几个值得关注的细节分页getList默认currentPage 1、pageSize 10、mode server通过query.range()实现服务端分页见 dataProvider/index.ts。schema 支持通过meta.schema可切换非publicschemasupabaseClient.schema(meta.schema)。关联查询排序时可解析foreignTable.field形式实现跨表排序示例中meta.select传入*, categories(title)即直接拉起关联字段。过滤器映射Refine 的CrudFilter运算符由 generateFilter.ts 逐条转换为 Supabase 查询例如contains→ilike(%value%)、between→gte(...).lte(...)运算符名映射见 mapOperator.ts。Live Provider基于 Postgres 实时变更订阅packages/supabase/src/liveProvider/index.ts 利用 Supabase 的postgres_changes实时通道把数据库中的INSERT/UPDATE/DELETE事件推送给 Refine 前端。它支持通过params.filters过滤订阅、通过params.ids只关注特定记录并监听默认publicschema 下的指定表——也就是说你在 Table Editor 里定义的表结构天然就是实时订阅的订阅源。开箱即用的示例项目仓库中的 examples/data-provider-supabase 是一个可直接运行的完整示例其 Supabase 客户端初始化见 src/utility/supabaseClient.ts页面代码位于 src/pages/posts。以列表页 list.tsx 为例它通过useTable的meta.select声明关联字段、配合useSelect加载分类下拉展示了数据库关系如何直接映射成表格列、筛选器和表单选项。参考 README 运行示例npm create refine-applatest -- --example contenteditable="false">【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考