问题描述
我将 Supabase 用于一个新的 sveltekit 应用程序,带有 this template
目前,我正在客户端传递 Supabase 密钥,如下所示:
const supabase = createClient(
import.Meta.env.VITE_SUPABASE_URL,import.Meta.env.VITE_SUPABASE_ANON_KEY
)
创建安全后端/API 的最简单方法是什么,以便应用程序可以从 Supabase 获取内容,而无需在客户端显示 Supabase 密钥?
sveltekit 中是否有任何功能可以让我执行此操作?或者我是否需要集成像 Rails 这样的后端?
解决方法
SvelteKit 在两个主要地方支持服务器端代码:
浏览器永远无法访问这些代码;只有结果。此外,任何网络调用对客户端都是不可见的,因为它们都发生在服务器上(对于 API 密钥嵌入在 URL 中的情况)。每个 API 的 locals
属性是与所有服务器端部件共享敏感数据(如 API 密钥)的好地方。
一般建议是使用本地端点代理外部 API 调用:
- 从 SvelteKit pages 获取本地 SvelteKit 端点(而不是直接调用外部 API,如 Supabase)。您可以从页面上的两个不同位置获取端点:
-
<script context="module">
中的load()
(允许在发送/呈现页面之前从服务器端调用 API) - 主要
<script>
-
- 在单例中初始化外部 API。
- 从端点调用外部 API 并将结果返回到页面。
注意事项: