目标：实现一个文章发布 Web 应用（Demo），包含用户注册、编辑、发布文章的功能，同时有广场（展示所有已发布文章、所有用户可以查看）、并使用管理员进行维护，技术架构是 Supabase + Vue，Vue 部署在哪里还未计划，以此为契机学习了解 Supabase 服务
本篇学习和记录了如下内容
用户表
CREATE TABLE users (
id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
username TEXT UNIQUE CHECK (char_length(username) >= 3),
email TEXT UNIQUE,
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);
users 表通过 id 字段扩展了 Supabase 内置的auth.users表
文章表
CREATE TABLE posts (
id SERIAL PRIMARY KEY,
user_id UUID REFERENCES users(id) ON DELETE CASCADE,
title VARCHAR(255) NOT NULL,
content TEXT,
published_at TIMESTAMPTZ,
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);
users 表和 posts 表之间存在一对多的关系，即一个用户可以拥有多篇文章。
触发器
-- 首先创建一个函数来更新 updated_at 字段
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = NOW();
RETURN NEW;
END;
$$ language 'plpgsql';
-- 为 users 表创建触发器
CREATE TRIGGER update_users_updated_at
BEFORE UPDATE ON users
FOR EACH ROW
EXECUTE FUNCTION update_updated_at_column();
-- 为 posts 表创建触发器
CREATE TRIGGER update_posts_updated_at
BEFORE UPDATE ON posts
FOR EACH ROW
EXECUTE FUNCTION update_updated_at_column();
点击 SQL Editor 侧边栏，右侧输入框执行 SQL 语句，执行后来到 Table Editor，可以看到已经成功创建两张表
但是上方都有 Unrestricted 标注，没有开启 RLS 策略，可以点击页面上的黄色 “RLS disabled” 按钮，或是运行以下 SQL 语句均可开启。
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
启用行级策略后，我们可以设置一些策略，例如：
允许用户只能插入（INSERT）属于自己的文章：
CREATE POLICY "用户只能发表自己的文章"
ON posts
FOR INSERT
WITH CHECK (auth.uid() = user_id);
这样，用户尝试插入文章时，Supabase 会检查要插入的 user_id 是否等于当前登录用户的 ID
备注：策略也可以在 Authentication 模块的 Policies 子模块中，点击表后进行可视化创建。
Supabase 提供邮件邀请和手动创建的方式
可以手动创建用户
也可以点击 “Send invitation” 发送邀请到邮箱。
最开始我以为 Supabase 发送邮件需要自己提供服务，就在网上找了一个 Brevo 这个服务，有免费额度，注册过程很丝滑，记录如下，这步可以跳过，直接使用 Supabase 的邮件服务就好，也不用设置。
服务地址：Free SMTP Server | Deliver to the Inbox Every Time
免费套餐每天 300 封，测试使用足够了
注册后点击右上角的组织，选择 “SMTP & API”
可以看到 SMTP 服务的服务器地址、用户名密码
还需要添加 Sender，否则发不出邮件
这里我起的应用名字是 “Reader Bot”，邮箱就是我的 Gmail 邮箱，需要真实的邮箱地址，稍后会发送验证码验证。
点击添加
提示我们的免费邮箱可能大概率进入收件人的垃圾邮箱，建议绑定域名，因为是测试，当然是 Anyway
验证完成后，可以看到新的 Sender 添加成功
此时 Brevo 提供的邮箱服务已可用
如果你申请了邮箱，可以在 Authentication 模块进行配置
填入 Brevo 获取到的邮箱服务信息
Sender email：k********0@gmail.com
Sender name：Reader Bot
Host：smtp-relay.brevo.com
Port number：587
Username：954923002@smtp-brevo.com
Password：(YOUR-SMTP key value)
此时，再回到 Authentication 下的 Users 表中发送邮件邀请用户，就可以收到邮件
内容如下
其中的邮件内容模板在 “Emails - Templates” 内进行配置，访问的链接在 “URL Configuration - Site URL” 进行配置，暂时先不用修改
在 Project Settings 的 API Keys 页面可以创建项目 Key
创建后有一个 Publishable key 可以在浏览器使用，格外注意，需要搭配 RLS 策略使用，它是可以公开的
sb_publishable_JToCFTBwo4urIOPnE9cIFg_1Wo-6WYj
页面下方还可以看到一个名为 default 的 Server Key 用于服务端机器、或者 Function、Workers 等
点击页面左侧的 API Docs 来到 API 页面
这里有一个知识点：Supabase 通过原生集成的 PostgREST，为数据库提供开箱即用的 Auto API，使开发者无需部署后端即可安全地进行基础的 CRUD 操作。
API 文档很细致，API 分为 Client API 和 Server API，Clinet API 可以
以下命令的 apikey 就是刚生成的 Publishable key（测试时可以使用临时邮箱, e.g. TEMP MAIL）
curl -X POST 'https://iurlblwfhmulfdysyqdz.supabase.co/auth/v1/signup' \
-H "apikey: sb_publishable_JToCFTBwo4urIOPnE9cIFg_1Wo-6WYj" \
-H "Content-Type: application/json" \
-d '{
"email": "nasovec941@chaublog.com",
"password": "123456"
}'
返回（已格式化）
{
"id": "b0fec5be-879d-4912-863e-b7495a8906b9",
"aud": "authenticated",
"role": "authenticated",
"email": "nasovec941@chaublog.com",
"phone": "",
"confirmation_sent_at": "2025-08-23T07:19:42.840305897Z",
"app_metadata": {
"provider": "email",
"providers": [
"email"
]
},
"user_metadata": {
"email": "nasovec941@chaublog.com",
"email_verified": false,
"phone_verified": false,
"sub": "b0fec5be-879d-4912-863e-b7495a8906b9"
},
"identities": [
{
"identity_id": "c9527fc9-13c9-4c85-a2c1-5b776663f22e",
"id": "b0fec5be-879d-4912-863e-b7495a8906b9",
"user_id": "b0fec5be-879d-4912-863e-b7495a8906b9",
"identity_data": {
"email": "nasovec941@chaublog.com",
"email_verified": false,
"phone_verified": false,
"sub": "b0fec5be-879d-4912-863e-b7495a8906b9"
},
"provider": "email",
"last_sign_in_at": "2025-08-23T07:19:42.817329844Z",
"created_at": "2025-08-23T07:19:42.81738Z",
"updated_at": "2025-08-23T07:19:42.81738Z",
"email": "nasovec941@chaublog.com"
}
],
"created_at": "2025-08-23T07:19:42.772681Z",
"updated_at": "2025-08-23T07:19:44.000369Z",
"is_anonymous": false
}
会收到 Supabase 注册邮件，目前地址会跳转到 localhost:3000 地址，我们的前端 Demo 还没开发部署（但是需要点击一下确认链接进行 Supabase 的用户激活）
此处仅体验使用 Publishable key 调用 Supabase 后端 API，注册用户后登陆：
curl -X POST 'https://iurlblwfhmulfdysyqdz.supabase.co/auth/v1/token?grant_type=password' \
-H "apikey: sb_publishable_JToCFTBwo4urIOPnE9cIFg_1Wo-6WYj" \
-H "Content-Type: application/json" \
-d '{
"email": "nasovec941@chaublog.com",
"password": "123456"
}'
返回
{
"access_token": "eyJhbGaciOiJ...NULE72KZGcdu6-LfeUdSbp8",
"token_type": "bearer",
"expires_in": 3600,
"expires_at": 1755937882,
"refresh_token": "u4jw6puieja6",
"user": {
"id": "b0fec5be-879d-4912-863e-b7495a8906b9",
"aud": "authenticated",
"role": "authenticated",
"email": "nasovec941@chaublog.com",
"email_confirmed_at": "2025-08-23T07:21:22.503059Z",
"phone": "",
"confirmation_sent_at": "2025-08-23T07:19:42.840305Z",
"confirmed_at": "2025-08-23T07:21:22.503059Z",
"last_sign_in_at": "2025-08-23T07:31:22.263515322Z",
"app_metadata": {
"provider": "email",
"providers": [
"email"
]
},
"user_metadata": {
"email": "nasovec941@chaublog.com",
"email_verified": true,
"phone_verified": false,
"sub": "b0fec5be-879d-4912-863e-b7495a8906b9"
},
"identities": [
{
"identity_id": "c9527fc9-13c9-4c85-a2c1-5b776663f22e",
"id": "b0fec5be-879d-4912-863e-b7495a8906b9",
"user_id": "b0fec5be-879d-4912-863e-b7495a8906b9",
"identity_data": {
"email": "nasovec941@chaublog.com",
"email_verified": true,
"phone_verified": false,
"sub": "b0fec5be-879d-4912-863e-b7495a8906b9"
},
"provider": "email",
"last_sign_in_at": "2025-08-23T07:19:42.817329Z",
"created_at": "2025-08-23T07:19:42.81738Z",
"updated_at": "2025-08-23T07:19:42.81738Z",
"email": "nasovec941@chaublog.com"
}
],
"created_at": "2025-08-23T07:19:42.772681Z",
"updated_at": "2025-08-23T07:31:22.270377Z",
"is_anonymous": false
}
}
以上都是 GETTING STARTED 的内容，接下来可以看下业务表相关的 API
翻到 Insert 语句，“创建一篇文章”
curl -X POST 'https://iurlblwfhmulfdysyqdz.supabase.co/rest/v1/posts' \
-H "apikey: sb_publishable_JToCFTBwo4urIOPnE9cIFg_1Wo-6WYj" \
-H "Authorization: Bearer eyJhbGaciOiJ...NULE72KZGcdu6-LfeUdSbp8" \
-H "Content-Type: application/json" \
-H "Prefer: return=minimal" \
-d '{ "title": "你好，世界！", "content": "北京今日天气：22-29度 多云 西北风3级" }'
报错
{"code":"42501","details":null,"hint":null,"message":"new row violates row-level security policy for table \"posts\""}%
RLS 行级策略不允许，执行以下策略：
-- 用户只能插入自己的帖子
CREATE POLICY "允许认证用户插入帖子"
ON posts
FOR INSERT
TO authenticated
WITH CHECK (true);
-- 用户只能更新自己的帖子
CREATE POLICY "用户只能更新自己的帖子"
ON posts
AS PERMISSIVE
FOR UPDATE
TO authenticated
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);
再次调用，没有返回任何内容，查看 Table Editor 可以看到已经多了一条记录
然后我发现 users 表也没有记录，即 Supabase 的 auth.users 和我的 public.users 表没有关联，同时 posts 表的 user_id 也是空；
分别解决这两个问题，对于 users 未同步，可以创建一个触发器
-- 创建函数
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
INSERT INTO public.users (id, email, username)
VALUES (
NEW.id,
NEW.email,
COALESCE(NEW.raw_user_meta_data->>'username', SPLIT_PART(NEW.email, '@', 1))
);
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
-- 创建触发器
CREATE OR REPLACE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();
好了，再注册个用户试试！
用户：oyentreng@deepyinc.com
密码：123456
注册、登陆不再重复粘贴代码，控制台已经可以看到用户
解决 posts 的 user_id 为空的问题可以创建如下触发器
-- 启用 uuid 扩展（如果尚未启用）
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-- 创建触发器函数
CREATE OR REPLACE FUNCTION public.set_post_user_id()
RETURNS TRIGGER AS $$
BEGIN
-- 从 JWT 中获取用户 ID 并设置
NEW.user_id = auth.uid();
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
-- 创建触发器
CREATE OR REPLACE TRIGGER set_post_user_id_trigger
BEFORE INSERT ON posts
FOR EACH ROW
EXECUTE FUNCTION public.set_post_user_id();
使用新的用户 Token 创建文章
curl -X POST 'https://iurlblwfhmulfdysyqdz.supabase.co/rest/v1/posts' \
-H "apikey: sb_publishable_JToCFTBwo4urIOPnE9cIFg_1Wo-6WYj" \
-H "Authorization: Bearer eyJhbGaciOiJ...YNGEpJM2MkFp0pj4Hj45RY-h9L06M4" \
-H "Content-Type: application/json" \
-H "Prefer: return=minimal" \
-d '{ "title": "你好，世界！", "content": "北京今日天气：22-29度 多云 西北风3级（下起了小雨）" }'
解决了
查看 “广场” 文章
以用户身份分页请求 10 篇文章
curl 'https://iurlblwfhmulfdysyqdz.supabase.co/rest/v1/posts?published_at=not.is.null&select=*' \
-H "apikey: sb_publishable_JToCFTBwo4urIOPnE9cIFg_1Wo-6WYj" \
-H "Authorization: Bearer eyJhbGaciOiJ...YNGEpJM2MkFp0pj4Hj45RY-h9L06M4" \
-H "Range: 0-9"
查询出来 [] 空数组，因为文章最开始我们定义了一个 “只能查询（SELECT）到已发布的文章” 的策略
现在正好试试 Server Key 的管理员 Key 的威力，批量更新 published_at 字段为当前时间（Server Key 要藏好）
curl -X PATCH 'https://iurlblwfhmulfdysyqdz.supabase.co/rest/v1/posts?id=in.(3,4,5)' \
-H "apikey: sb_secret_Xr48DdK*************pmR1XA_xLeM45LH" \
-H "Content-Type: application/json" \
-H "Prefer: return=minimal" \
-d '{ "published_at": "now()" }'
apikey 设置为 sb_secret_xxxx 管理员密钥，无需 Authorization Header
已更新，预期应该是可以查询到了，但是依然返回 []，到 Supabase 翻翻，发现还是 RLS 策略缺失的问题；
Supabase SQL 执行页面有个功能，可以选择作为哪个 ROLE 执行
默认使用 postgres，也可以切换为匿名角色或是 authenticated role，选择后可以选择特定的用户，到表的 RLS policies 页面，添加策略
using 条件就是发布时间不为空，允许了匿名和已登陆用户查看；
[
{
"id": 3,
"user_id": null,
"title": "你好，世界！",
"content": "北京今日天气：22-29度 多云 西北风3级",
"published_at": "2025-08-23T08:38:44.481162+00:00",
"created_at": "2025-08-23T07:58:08.479927+00:00",
"updated_at": "2025-08-23T08:38:44.481162+00:00"
},
{
"id": 4,
"user_id": null,
"title": "你好，世界！",
"content": "北京今日天气：22-29度 多云 西北风3级（下起了小雨）",
"published_at": "2025-08-23T08:38:44.481162+00:00",
"created_at": "2025-08-23T08:18:26.565641+00:00",
"updated_at": "2025-08-23T08:38:44.481162+00:00"
},
{
"id": 5,
"user_id": "badab300-959f-42f7-ae75-99d74f937804",
"title": "你好，世界！",
"content": "北京今日天气：22-29度 多云 西北风3级（下起了小雨）",
"published_at": "2025-08-23T08:38:44.481162+00:00",
"created_at": "2025-08-23T08:25:13.986663+00:00",
"updated_at": "2025-08-23T08:38:44.481162+00:00"
}
]
“广场” 功能没问题，通过接口查询到了所有已发布的文章；
RLS 策略：用户每天最多发表 10 篇文章
CREATE POLICY "用户每天只能插入10篇文章"
ON posts
FOR INSERT
TO authenticated
WITH CHECK (
auth.uid() = user_id AND
-- 可以添加其他限制条件，比如每天最多10篇
(SELECT COUNT(*) FROM posts
WHERE user_id = auth.uid()
AND created_at > NOW() - INTERVAL '1 day') < 10
);
在 Edge Functions 可以配置函数，以下的限制借助边缘函数实现
rate-limiter（30 请求每分钟）
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
// 内存存储速率限制
const rateLimitMap = new Map<string, { count: number; resetTime: number }>();
Deno.serve(async (req: Request) => {
// 获取客户端IP
const clientIP = req.headers.get('x-forwarded-for') || 'unknown';
// 速率限制检查
const now = Date.now();
const limitData = rateLimitMap.get(clientIP) || { count: 0, resetTime: now + 60000 };
// 重置计数器（每分钟）
if (now > limitData.resetTime) {
limitData.count = 0;
limitData.resetTime = now + 60000;
}
// 检查限制（每分钟30次）
if (limitData.count >= 30) {
return new Response(
JSON.stringify({ error: 'Rate limit exceeded' }),
{ status: 429 }
);
}
// 增加计数
limitData.count++;
rateLimitMap.set(clientIP, limitData);
// 返回成功响应
return new Response(
JSON.stringify({
success: true,
method: req.method,
remaining: 30 - limitData.count
}),
{ headers: { 'Content-Type': 'application/json' } }
);
});
post-content-size（限制 content 字段 10kb 大小）
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
Deno.serve(async (req: Request) => {
try {
// 读取请求内容
const content = await req.text();
// 计算内容大小（字节数）
const contentSize = new TextEncoder().encode(content).length;
// 检查大小限制（10KB = 10240字节）
if (contentSize > 10240) {
return new Response(
JSON.stringify({
error: 'Content too large',
max_size: '10KB',
actual_size: `${(contentSize / 1024).toFixed(2)}KB`
}),
{ status: 413 }
);
}
// 内容大小合格
return new Response(
JSON.stringify({
success: true,
size: `${contentSize} bytes`,
size_kb: `${(contentSize / 1024).toFixed(2)}KB`
}),
{ headers: { 'Content-Type': 'application/json' } }
);
} catch (error) {
return new Response(
JSON.stringify({ error: 'Invalid request' }),
{ status: 400 }
);
}
});
reg-user-limiter（每天限制最多 100 人注册）
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
import { createClient } from "jsr:@supabase/supabase-js@2";
const supabase = createClient(
Deno.env.get("SUPABASE_URL")!,
Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
);
Deno.serve(async (req: Request) => {
try {
// 查询今日注册数量
const today = new Date().toISOString().split('T')[0];
const { count, error } = await supabase
.from('auth.users')
.select('*', { count: 'exact', head: true })
.gte('created_at', `${today}T00:00:00`)
.lte('created_at', `${today}T23:59:59`);
if (error) throw error;
// 检查是否超过限制
if (count >= 100) {
return new Response(
JSON.stringify({
error: 'Daily registration limit reached',
limit: 100,
today_count: count
}),
{ status: 429 }
);
}
// 允许注册
return new Response(
JSON.stringify({
allowed: true,
remaining: 100 - count,
today_count: count
}),
{ headers: { 'Content-Type': 'application/json' } }
);
} catch (error) {
return new Response(
JSON.stringify({ error: 'Internal server error' }),
{ status: 500 }
);
}
});
AI 提供的 Function 函数，我配置上，但没测试是否能正常工作 🤷
不知不觉记录了不少内容，后端目前先了解这些，已覆盖 Demo 所需功能，Web 前端的开发放到下篇文章进行记录。
下篇会根据 Supabase 的文档示例，使用 Vue 开发前端页面，也会调研部署在哪个免费服务比较好。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。