8

我正在将 Supabase 用于新的 Sveltekit 应用程序，使用此模板

目前，我正在客户端传递 Supabase 密钥，如下所示：

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

我可以创建一个安全的后端/API 的最简单方法是什么，以便应用程序可以从 Supabase 获取内容，而不在客户端显示 Supabase 密钥？

Sveltekit 中是否有任何内置功能可以让我做到这一点？或者我需要集成像 Rails 这样的后端吗？

4

1 回答 1

18

SvelteKit 在两个主要地方支持服务器端代码：

浏览器将永远无法访问这些代码；只有结果。此外，任何网络调用对客户端都是不可见的，因为它们都发生在服务器上（对于 API 密钥嵌入在 URL 中的情况）。每个 API的locals属性都是与所有服务器端部分共享敏感数据（如 API 密钥）的好地方。

一般建议是使用本地端点代理外部 API 调用：

  1. 从SvelteKit 页面获取本地 SvelteKit 端点（而不是直接调用外部 API，如 Supabase）。您可以从页面上的两个不同位置获取端点：
    • load()in <script context="module">（允许在发送/渲染页面之前从服务器端调用 API）
    • 主要的<script>
  2. 在单例中初始化外部 API。
  3. 从端点调用外部 API 并将结果返回到页面。

笔记：

  • SvelteKit 端点是无服务器 lambda 函数的泛化。（请参阅Netlify或AWS风格）
  • 端点/钩子中使用的任何 NPM 模块都必须是 devDependencies。
  • fetch()推荐使用（例如，与 axios 相比），尤其是在load(). load()提供了一个特殊版本的fetch()缓存来自服务器端的调用，以便客户端可以重用结果。
  • 第 2 步主要是支持 Netlify 等无服务器环境。
于 2021-05-18T02:05:03.123 回答