supaBase学习笔记

是什么#

The open source Firebase alternative.

目标是将后端服务抽象为可直接调用的 API

核心功能#

1
// 上传文件示例
2
const { data, error } = await supabase.storage
3
  .from('avatars')
4
  .upload('user1.png', file)

1
// 订阅用户表变更
2
const subscription = supabase
3
  .channel('user-changes')
4
  .on(
5
    'postgres_changes',
6
    {
7
      event: '*',
8
      schema: 'public',
9
      table: 'users',
10
    },
11
    (payload) => {
12
      console.log('数据变更:', payload)
13
    }
14
  )
15
  .subscribe()

Supabase CLI#

Supabase 本地开发，在本地计算机上的独立环境中处理项目，需要 Docker 环境

• supabase init：初始化本地项目，生成 supabase/config.toml 以及 migrations、functions、tests 等目录
• supabase login：登录 Supabase，自动打开浏览器，输入对应的 verification code 登陆，显示登陆成功
• supabase start / supabase stop：用 Docker 启动／停止完整的 Supabase 本地环境，一步到位
• supabase migration：管理数据库迁移，让 schema 变更更可控
• supabase db push：把本地 schema/函数直接推到你在 Supabase 平台上的数据库（很适合 CI/CD
• supabase projects：查、建、删 Supabase 项目
• supabase gen types：一键从数据库生成 TypeScript 类型定义，前端调用接口更安心
• supabase completion：帮你生成 Shell 补全脚本，不用每次记命令格式

Supabase SDK#

1
npm install @supabase/supabase-js

1
npx supabase gen types typescript \
2
  --project-id <your-project-id> \
3
  --schema public \
4
  > database.types.ts

vue 快速入门#

通过邮箱注册登陆

• supabase.auth.signUp
• supabase.auth.verifyOtp
• supabase.auth.signInWithPassword

接收邮件模版配置

打通默认的 auth.users 表（身份认证表）和自定义的 user 表（业务用户表）#

1. 创建业务用户表

   1
    -- 在 Supabase SQL 编辑器中执行
   2
      create table public.user (
   3
        id uuid references auth.users(id) primary key, -- 外键关联
   4
        username text unique,
   5
        avatar_url text,
   6
        created_at timestamp with time zone default now()
   7
      );

2. 设置行级安全（RLS）

   1
   -- 允许用户仅访问自己的数据
   2
   alter table public.user enable row level security;
   3
   
   4
   create policy "用户只能管理自己的数据"
   5
   on public.user
   6
   for all using (auth.uid() = id);

3. 自动同步用户创建事件

   • 使用数据库触发器

     1
      -- 当 auth.users 插入新用户时，自动创建 public.user 记录
     2
     create or replace function public.handle_new_user()
     3
     returns trigger as $$
     4
     begin
     5
      insert into public.user (id, username)
     6
      values (new.id, new.email); -- 初始用户名设为邮箱
     7
      return new;
     8
     end;
     9
     $$ language plpgsql security definer;
     10
     
     11
     -- 绑定触发器
     12
     drop trigger if exists on_auth_user_created on auth.users;
     13
     create trigger on_auth_user_created
     14
      after insert on auth.users
     15
      for each row execute procedure public.handle_new_user();

     展开收起

   • 客户端代码同步

     1
     // 用户注册成功后，手动插入数据到 public.user
     2
     const {
     3
       data: { user },
     4
       error,
     5
     } = await supabase.auth.signUp({
     6
       email: 'user@example.com',
     7
       password: 'password123',
     8
     })
     9
     
     10
     if (user) {
     11
       await supabase.from('user').insert({
     12
         id: user.id,
     13
         username: user.email,
     14
       })
     15
     }

     展开收起

遇到问题#

1. 查询结果为空数组

   之所以会得到空数组，是因为 Supabase 为每张表启动 Row Level Security 策略，我们回到 Supabase Dashboard，打开右侧菜单Authentication - Policies，可以看到在表的安全策略中有个提示：

   翻译就是：已为此表启用行级别安全性，但未设置任何策略，选择查询将返回一个空的结果数组。

   知道原因后，我们需要配置一个安全策略，点击右侧的 Create policy，这里我们只需要放开 Select 查询的权限就行，它会绕过 Row Level Security 策略：

2. Edge Functions 报 CORS error

   需要在函数中设置请求头

   1
   // 定义 CORS 头
   2
   const corsHeaders = {
   3
     'Access-Control-Allow-Origin': '*', // 或者指定您的域名
   4
     'Access-Control-Allow-Headers':
   5
       'authorization, x-client-info, apikey, content-type',
   6
     'Access-Control-Allow-Methods': 'POST, OPTIONS',
   7
   }

3. 部署的服务传递 Authorization Header 报 401 Unauthorized

   1
   // Authorization置空
   2
   accessToken: () => Promise.resolve(''),

4. 部署的服务 SUPABASE_URL、SUPABASE_SERVICE_ROLE_KEY 获取不到

   环境变量问题、查看 edge function 日志 docker logs supabase-edge-functions

5. 报错 JWSError JWSInvalidSignature

   查库时报错

   1
   const supabase = createClient(supabaseUrl, supabaseKey)
   2
   
   3
   // 查询 product_list 表
   4
   let { data: product_list, error } = await supabase.from('product_list')

   解决方案 1未解决 解决方案 2

   官网生成 API keys对自部署的服务有 bug

   1
   import { KJUR } from 'jsrsasign'
   2
   import crypto from 'crypto'
   3
   
   4
   const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
   5
   const now = new Date()
   6
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
   7
   const fiveYears = new Date(
   8
     now.getFullYear() + 5,
   9
     now.getMonth(),
   10
     now.getDate()
   11
   )
   12
   
   13
   const anonToken = `
   14
      {
   15
        "role": "anon",
   16
        "iss": "qmp_supabase",
   17
        "iat": ${Math.floor(today.valueOf() / 1000)},
   18
        "exp": ${Math.floor(fiveYears.valueOf() / 1000)}
   19
      }
   20
      `.trim()
   21
   
   22
   const serviceToken = `
   23
      {
   24
        "role": "service_role",
   25
        "iss": "qmp_supabase",
   26
        "iat": ${Math.floor(today.valueOf() / 1000)},
   27
        "exp": ${Math.floor(fiveYears.valueOf() / 1000)}
   28
      }
   29
      `.trim()
   30
   
   31
   const generateRandomString = (length) => {
   32
     const CHARS =
   33
       'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
   34
     let result = ''
   35
     const MAX = Math.floor(256 / CHARS.length) * CHARS.length - 1
   36
     const randomUInt8Array = new Uint8Array(1)
   37
     for (let i = 0; i < length; i++) {
   38
       let randomNumber
   39
       do {
   40
         crypto.getRandomValues(randomUInt8Array)
   41
         randomNumber = randomUInt8Array[0]
   42
       } while (randomNumber > MAX)
   43
       result += CHARS[randomNumber % CHARS.length]
   44
     }
   45
     return result
   46
   }
   47
   
   48
   const jwt_secret_key = generateRandomString(128)
   49
   const anonTokenSigned = KJUR.jws.JWS.sign(
   50
     null,
   51
     JWT_HEADER,
   52
     anonToken,
   53
     jwt_secret_key
   54
   )
   55
   const serviceTokenSigned = KJUR.jws.JWS.sign(
   56
     null,
   57
     JWT_HEADER,
   58
     serviceToken,
   59
     jwt_secret_key
   60
   )
   61
   console.log(`JWT_SECRET=${jwt_secret_key}`)
   62
   console.log(`ANON_KEY=${anonTokenSigned}`)
   63
   console.log(`SERVICE_ROLE_KEY=${serviceTokenSigned}`)

   展开收起

6. 自部署服务无法使用 Email/password 登陆

   1
   ENABLE_PHONE_SIGNUP = true

7. 目前只能访问 public schema 下的库

   1
   ;(PGRST_DB_SCHEMAS = public), storage, graphql_public, xxx

   1
   export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
   2
      db: {
   3
        schema: 'xxx'
   4
      },

   未解决 denied for schema xxx

8. 获取所有表/表中的字段属性

   创建 database functions

   1
   create or replace function get_tables()
   2
    returns table (table_name text)
   3
    language plpgsql
   4
    as $$
   5
    begin
   6
      return query
   7
      select t.table_name::text
   8
      from information_schema.tables t
   9
      where t.table_schema = 'public'
   10
      and t.table_type = 'BASE TABLE';
   11
    end;
   12
    $$;

   1
   create or replace function get_table_columns(p_table_name text)
   2
    returns table (
   3
      column_name text,
   4
      data_type text,
   5
      is_nullable boolean,
   6
      column_default text
   7
    )
   8
    language plpgsql
   9
    as $$
   10
    begin
   11
      return query
   12
      select
   13
        c.column_name::text,
   14
        c.data_type::text,
   15
        c.is_nullable::boolean,
   16
        c.column_default::text
   17
      from information_schema.columns c
   18
      where c.table_schema = 'public'
   19
      and c.table_name = p_table_name;
   20
    end;
   21
    $$;

   展开收起

   通过 rpc 调用 await supabase.rpc('get_tables')、await supabase.rpc('get_table_columns', { p_table_name: 'your_table_name' })

小结#

解放后端：Supabase 将 PostgreSQL、自动生成的 REST/GraphQL API、Auth、Storage、Realtime 等能力封装好，让前端直接对接数据库和云函数，不依赖后端。

快速迭代：通过 Supabase Studio 可视化建表，前端可自主搭建 CRUD 功能模块，提高开发速度。

可扩展：需要更复杂的业务逻辑，还可以用 Edge Functions 来实现补丁功能。