前言
这个章节我们要先把数据库的环境配置好，古人云：工欲善其事，必先利其器。
这两天我一直在网上寻找最适合 Nuxt 的数据库，之前在做个人项目时经常用的是 Mysql 和 MongoDB，也用过 ORM 框架比如：Sequelize、TypeORM，本来计划使用 Prisma，后来认真看了 Nuxt 集成的数据库模块后，还是选择了 Supabase，在我看来主要原因有3点：
- Supabase 网上风评比较好，而且 Nuxt 集成了 Nuxt Supabase 模块
- 用户认证和身份鉴权开箱即用，提供了多种认证类型机制
- 我没用过，在开发上我喜欢用我没用过的技术或工具
话不多说，直接整活。
Supabase 介绍
Supabase 是一个开源的 Firebase 替代品，提供了一系列的后端功能，让你可以更快地构建产品。主要特点有：
- 数据库：Supabase 使用 PostgreSQL 作为数据库，支持 SQL 和 RESTful API 访问
- 认证：Supabase 提供了一个完整的认证系统，支持邮箱、手机号、第三方服务等多种登录方式
- 实时订阅：Supabase 允许你通过 WebSocket 实现实时数据同步，无需编写额外的代码
- 存储：Supabase 提供了一个对象存储服务，可以方便地上传、下载和管理文件
- 边缘函数：Supabase 支持在边缘节点上运行 JavaScript 函数，可以用来处理请求或触发事件
Supabase 有一个免费套餐，可以让你创建最多三个项目，并享受一定的资源限额。如果你需要更多的项目或资源，你可以选择按需付费或者预付费的套餐。
创建 Supabase 数据库
-
打开 Supabase Dashboard，选择登录方式，这里我直接选择
Github登录
-
进入控制台，点击
New project创建项目
-
进入项目管理界面，点击左侧菜单的
Database，再点击右侧的New table创建一张表
-
点击右侧菜单的
Table Editor，打开新建的表，先插入两条测试数据
-
点击右侧菜单的
Project Settings - API，在右侧可以看到项目连接所需要的密钥
到这里，我们就创建好数据库了，接下来我们在 Nuxt 上测试一下是否能成功连接。
Nuxt 安装 Supabase
- 根目录下执行命令
pnpm add @nuxtjs/supabase -D
pnpm add @supabase/supabase-js
- 在
.env文件中添加SUPABASE_URL和SUPABASE_KEY
SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"
- 打开
nuxt.config.ts文件，添加配置：
export default defineNuxtConfig({
modules: ['@nuxtjs/supabase'],
// 自定义配置
supabase: {
redirect: false // https://supabase.nuxtjs.org/get-started#redirect
},
})
这里我们先将配置
redirect设置为false，因为 Supabase 默认如果未经身份验证的用户试图访问受保护的登录页面，则自动重定向到配置的登录页面。
- 打开
pages/index.vue文件，尝试访问数据库
<template>
<div
class="flex justify-center items-center font-black text-5xl flex-col"
style="height: calc(100vh - 8rem)"
>
Hello World!
<div class="flex gap-4 mt-4">
<UButton
v-for="item in data"
:key="item.id"
:label="item.name"
/>
</div>
</div>
</template>
<script setup lang="ts">
import type { CategoryList } from '~/types'
const supabase = useSupabaseClient<CategoryList>()
const { data, error } = await supabase.from('site_category').select()
console.log('data',data)
console.log('error',error)
</script>
在浏览器打开，如果不出意外的话，你能连接到数据库，但是你会得到一个空数组。重点来了，这是为什么呢？
配置 RLS 安全策略
之所以会得到空数组，是因为 Supabase 为每张表启动 Row Level Security 策略，我们回到 Supabase Dashboard，打开右侧菜单 Authentication - Policies，可以看到在表的安全策略中有个提示：
翻译就是：已为此表启用行级别安全性，但未设置任何策略，选择查询将返回一个空的结果数组。
知道原因后，我们需要配置一个安全策略，点击右侧的 Create policy，这里我们只需要放开 Select 查询的权限就行，它会绕过 Row Level Security 策略：
刷新浏览器，我们就能看到数据正常访问了：
这里我们只是放开了
Select查询的权限，后续的INSERT、UPDATE等操作权限会在身份认证后才可以执行。
总结
通过本文，你可以成功使用 Nuxt 连接 Supabase 数据库，但其中也有几个点需要注意：
- Supabase 为每张表启动 Row Level Security 策略，如果你想在不经过身份认证的情况下执行数据库操作，需要配置 Policies 策略
Project Settings - API有两个Project API keys：anon key：如果为表和已配置的策略启用了行级安全性，则可以在浏览器中安全使用此键service_role：此密钥具有绕过行级安全性的能力，永远不要公开分享
- 在开发环境中，我们往往需要不用完成身份认证就能执行数据库操作，这时候你就可以把
SUPABASE_KEY设置成service_role。
但是生产环境中一定要切换成
anon key，因为SUPABASE_KEY会暴露在浏览器的请求头中
Github 仓库：dream-site
线上预览：dream-site.cn
