Nuxt3 实战 (七):配置 Supabase 数据库

简介: 这篇文章介绍了如何为Nuxt项目集成Supabase数据库。文章首先阐述了选择Supabase作为Nuxt项目的数据库的理由,包括其良好的网络评价、与Nuxt的良好集成以及对用户认证和身份鉴权的支持。接着,文章详细介绍了Supabase的特点,如使用PostgreSQL作为数据库、提供完整的认证系统、支持实时数据同步和提供对象存储服务等。然后,文章指导读者如何在Nuxt项目中安装和配置Supabase,包括设置重定向策略和获取数据库访问密钥。最后,文章强调了在开发环境和生产环境中使用不同密钥的重要性。

前言

这个章节我们要先把数据库的环境配置好,古人云:工欲善其事,必先利其器

这两天我一直在网上寻找最适合 Nuxt 的数据库,之前在做个人项目时经常用的是 MysqlMongoDB,也用过 ORM 框架比如:SequelizeTypeORM,本来计划使用 Prisma,后来认真看了 Nuxt 集成的数据库模块后,还是选择了 Supabase,在我看来主要原因有3点:

  1. Supabase 网上风评比较好,而且 Nuxt 集成了 Nuxt Supabase 模块
  2. 用户认证和身份鉴权开箱即用,提供了多种认证类型机制
  3. 我没用过,在开发上我喜欢用我没用过的技术或工具

话不多说,直接整活。

Supabase 介绍

Supabase 是一个开源的 Firebase 替代品,提供了一系列的后端功能,让你可以更快地构建产品。主要特点有:

  • 数据库:Supabase 使用 PostgreSQL 作为数据库,支持 SQL 和 RESTful API 访问
  • 认证:Supabase 提供了一个完整的认证系统,支持邮箱、手机号、第三方服务等多种登录方式
  • 实时订阅:Supabase 允许你通过 WebSocket 实现实时数据同步,无需编写额外的代码
  • 存储:Supabase 提供了一个对象存储服务,可以方便地上传、下载和管理文件
  • 边缘函数:Supabase 支持在边缘节点上运行 JavaScript 函数,可以用来处理请求或触发事件

Supabase 有一个免费套餐,可以让你创建最多三个项目,并享受一定的资源限额。如果你需要更多的项目或资源,你可以选择按需付费或者预付费的套餐。

创建 Supabase 数据库

  1. 打开 Supabase Dashboard,选择登录方式,这里我直接选择 Github 登录
    fhskdiqcvro1niqatwtnn8zudflosdtp.png

  2. 进入控制台,点击 New project 创建项目
    3ot25n0mrowstwa5syxbfyp52q9u5dv6.png

  3. 进入项目管理界面,点击左侧菜单的 Database,再点击右侧的 New table 创建一张表
    hbrxids6amecmkelxyjnd89s02rjqqhq.png
    roov67ea7ddwrtqphdvmudj0scog0e8k.png

  4. 点击右侧菜单的 Table Editor,打开新建的表,先插入两条测试数据
    tnq2fhltso2i50vl3ekwxt5t2799u1av.png

  5. 点击右侧菜单的 Project Settings - API,在右侧可以看到项目连接所需要的密钥
    dmrekfo2ahkghbz55xahn7i9jfc86sv9.png

    到这里,我们就创建好数据库了,接下来我们在 Nuxt 上测试一下是否能成功连接。

Nuxt 安装 Supabase

  1. 根目录下执行命令
    pnpm add @nuxtjs/supabase -D
    pnpm add @supabase/supabase-js
    
  2. .env 文件中添加 SUPABASE_URLSUPABASE_KEY
    SUPABASE_URL="https://example.supabase.co"
    SUPABASE_KEY="<your_key>"
    
  3. 打开 nuxt.config.ts 文件,添加配置:

    export default defineNuxtConfig({
         
         
    modules: ['@nuxtjs/supabase'],
    // 自定义配置
    supabase: {
         
         
    redirect: false // https://supabase.nuxtjs.org/get-started#redirect
    },
    })
    

    这里我们先将配置 redirect 设置为 false,因为 Supabase 默认如果未经身份验证的用户试图访问受保护的登录页面,则自动重定向到配置的登录页面。

  4. 打开 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>
    

    在浏览器打开,如果不出意外的话,你能连接到数据库,但是你会得到一个空数组。重点来了,这是为什么呢?
    a777il7di2htlhvet8cm5d8qx3meunq7.png

配置 RLS 安全策略

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

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

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

刷新浏览器,我们就能看到数据正常访问了:
ye77q8bor7oln473ncav48693in6vd0c.png

这里我们只是放开了 Select 查询的权限,后续的 INSERTUPDATE 等操作权限会在身份认证后才可以执行。

总结

通过本文,你可以成功使用 Nuxt 连接 Supabase 数据库,但其中也有几个点需要注意:

  1. Supabase 为每张表启动 Row Level Security 策略,如果你想在不经过身份认证的情况下执行数据库操作,需要配置 Policies 策略
  2. Project Settings - API 有两个 Project API keys
    • anon key:如果为表和已配置的策略启用了行级安全性,则可以在浏览器中安全使用此键
    • service_role:此密钥具有绕过行级安全性的能力,永远不要公开分享
  3. 在开发环境中,我们往往需要不用完成身份认证就能执行数据库操作,这时候你就可以把 SUPABASE_KEY 设置成 service_role

但是生产环境中一定要切换成 anon key,因为 SUPABASE_KEY 会暴露在浏览器的请求头中

Github 仓库dream-site

线上预览dream-site.cn

相关文章
|
12天前
|
Prometheus 监控 关系型数据库
数据库同步革命:MySQL GTID模式下主从配置的全面解析
数据库同步革命:MySQL GTID模式下主从配置的全面解析
38 0
|
4天前
|
JavaScript 关系型数据库 MySQL
Python实战:从猎聘网获取职位信息并存入数据库
Python实战:从猎聘网获取职位信息并存入数据库
|
5天前
|
缓存 运维 Serverless
Serverless 应用引擎产品使用合集之基于django应用模板创建的FC,如何配置数据库
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
6天前
|
SQL 安全 数据库
精通SQL:数据库查询与管理的实战指南
一、引言 在当今数字化时代,[数据库](https://www.iyxwzx.com/)已成为企业、组织和个人不可或缺的数据[管理](https://www.iyxwzx.com/news/)工具
|
10天前
|
存储 缓存 测试技术
数据库在云存储环境中的配置与优化
【6月更文挑战第6天】探讨数据库在云存储的配置与优化,包括选择合适云服务、设计高效架构、查询语句优化、参数调整、数据分区索引、备份恢复策略、资源监控及性能测试。通过实践与学习,提升应对云环境中的数据库挑战能力。如有问题,欢迎讨论。
30 0
|
11天前
|
SQL 存储 关系型数据库
MySQL数据库案例实战教程:数据类型、语法与高级查询详解
MySQL数据库案例实战教程:数据类型、语法与高级查询详解
28 3
|
12天前
|
SQL 监控 关系型数据库
MySQL慢查询日志配置指南:发现性能瓶颈,提升数据库效率
MySQL慢查询日志配置指南:发现性能瓶颈,提升数据库效率
17 0
|
12天前
|
API 数据库 数据库管理
Flask Web开发基础:数据库与ORM实战
该文介绍了如何使用 Flask、SQLAlchemy 和 SQLite 实现数据库操作。首先,通过创建虚拟环境和安装 flask-sqlalchemy(版本2.5.1)及 sqlalchemy(版本1.4.47)来设置环境。接着,配置数据库URI,定义User和Movie模型类表示数据库表,并通过db.create_all()创建表。文章还展示了如何插入、查询、更新和删除记录,强调了db.session.commit()在保存更改中的关键作用。查询涉及filter、order_by等方法,提供了一系列示例。
297 1
|
20天前
|
SQL 关系型数据库 分布式数据库
【PolarDB开源】PolarDB Proxy配置与优化:提升数据库访问效率
【5月更文挑战第27天】PolarDB Proxy是阿里云PolarDB的高性能数据库代理,负责SQL请求转发和负载均衡。其关键配置包括:连接池管理(如最大连接数、空闲超时时间),负载均衡策略(轮询、权重轮询、一致性哈希),以及SQL过滤规则。优化方面,关注监控与调优、缓存策略、网络优化。通过这些措施,可提升数据库访问效率和系统稳定性。
123 1
|
1天前
|
SQL 存储 关系型数据库
深入理解MySQL:数据库管理与性能优化
第一章:MySQL基础 MySQL概述:简要介绍MySQL的历史、特点和应用领域