网站LOGO
白雾茫茫丶
页面加载中
6月25日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Nuxt3 实战 (七):配置 Supabase 数据库
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

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

    谢明伟 · 原创 ·
    前端开发Nuxt3 实战 · VueNuxt
    共 5408 字 · 约 3 分钟 · 384

    前言

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

    这两天我一直在网上寻找最适合 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 登录
    2. 进入控制台,点击 New project 创建项目
    3. 进入项目管理界面,点击左侧菜单的 Database,再点击右侧的 New table 创建一张表
    4. 点击右侧菜单的 Table Editor,打开新建的表,先插入两条测试数据
    5. 点击右侧菜单的 Project Settings - API,在右侧可以看到项目连接所需要的密钥

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

    Nuxt 安装 Supabase

    1. 根目录下执行命令

      powershell 代码:
      pnpm add @nuxtjs/supabase -D
      pnpm add @supabase/supabase-js
    2. .env 文件中添加 SUPABASE_URLSUPABASE_KEY

      env 代码:
      SUPABASE_URL="https://example.supabase.co"
      SUPABASE_KEY="<your_key>"
    3. 打开 nuxt.config.ts 文件,添加配置:

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

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

    4. 打开 pages/index.vue 文件,尝试访问数据库

      html 代码:
        <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 查询的权限,后续的 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

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    3

    条评论
    我要发表评论
    1. 头像
      · · 河北-秦皇岛
      • 等级:Lv.3
      • 角色:访客
      • 在线:本月
      头像
      板凳

      你现在是老师嘛教这么多东西

      评论
      1. · · 广东-深圳
        • 角色:博主
        • 在线:本周
        头像

        哈哈,因为一些东西工作中接触不到,只能空闲时间捣鼓,正好把捣鼓过程记录一下

        评论
    2. · · 四川-宜宾
      • 等级:Lv.1
      • 角色:访客
      • 在线:三月内
      头像
      沙发

      认真看完这篇技术性的博客,get到了新知识

      评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 4小时前 在线

    🕛

    本站已运行 2 年 176 天 10 小时 32 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事