环境变量 / $env/static/private • Svelte 教程 • 中文文档

SvelteKit 进阶环境变量 $env/static/private

环境变量 — 如 API 密钥和数据库凭证 — 可以添加到 .env 文件中，它们将对你的应用程序可用。

你也可以使用 .env.local 或 .env.[mode] 文件 — 查看 Vite 文档获取更多信息。确保将包含敏感信息的任何文件添加到你的 .gitignore 文件中！

process.env 中的环境变量也可以通过 $env/static/private 获得。

在这个练习中，我们想要通过使用环境变量，让用户在知道正确密码短语的情况下进入网站。

首先，在 .env 中，添加一个新的环境变量：

PASSPHRASE="open sesame"

打开 src/routes/+page.server.js。从 $env/static/private 导入 PASSPHRASE 并在表单 action 中使用它：

src/routes/+page.server

import { redirect, fail } from '@sveltejs/kit';
import { PASSPHRASE } from '$env/static/private';

export function load({ cookies }) {
	if (cookies.get('allowed')) {
		redirect(307, '/welcome');
	}
}

export const actions = {
	default: async ({ request, cookies }) => {
		const data = await request.formData();

		if (data.get('passphrase') === PASSPHRASE) {
			cookies.set('allowed', 'true', {
				path: '/'
			});

			redirect(303, '/welcome');
		}

		return fail(403, {
			incorrect: true
		});
	}
};

现在，知道正确口令的任何人都可以访问网站。

保守秘密

确保敏感数据不会意外地发送到浏览器很重要，因为在浏览器中这些数据很容易被黑客和恶意用户窃取。

SvelteKit 使防止这种情况发生变得容易。注意当我们尝试在 src/routes/+page.svelte 中导入 PASSPHRASE 时会发生什么：

src/routes/+page

<script>
	import { PASSPHRASE } from '$env/static/private';
	let { form } = $props();
</script>

<script lang="ts">
	import { PASSPHRASE } from '$env/static/private';
	let { form } = $props();
</script>

会弹出一个错误提示，告诉我们 $env/static/private 不能导入到客户端代码中。它只能导入到服务端模块中：

+page.server.js
+layout.server.js
+server.js
任何以 .server.js 结尾的模块
src/lib/server 中的任何模块

反过来，这些模块只能被其他服务端模块导入。

静态 vs 动态

$env/static/private 中的 static 表示这些值在构建时就是已知的，可以被静态替换。这使得以下优化成为可能：

import { FEATURE_FLAG_X } from '$env/static/private';

if (FEATURE_FLAG_X === 'enabled') {
	// 如果 FEATURE_FLAG_X 未启用
	// 这里的代码将从构建输出中移除
}

在某些情况下，你可能需要引用动态的环境变量 — 换句话说，直到我们运行应用程序时才知道的变量。我们将在下一个练习中讨论这种情况。

在 GitHub 编辑此页面

invalidateAll $env/dynamic/private

<script>

	let { form } = $props();

</script>

<form method="POST">

	<label>

		enter the passphrase

		<input name="passphrase" autocomplete="off" />

	</label>

</form>

{#if form?.incorrect}

	<p class="error">wrong passphrase!</p>

{/if}

<style>

	.error {

		color: red;

</style>

show text show editor