跳至主要内容
高级 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，并在 表单操作 中使用它

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 使防止这种情况变得很容易。请注意，如果我们尝试将 PASSPHRASE 导入 src/routes/+page.svelte 会发生什么

src/routes/+page
<script>
	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 中的任何模块

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

静态与动态

$env/static/private 中的 static 表示这些值在构建时已知，并且可以静态替换。这使得有用的优化成为可能

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

if (FEATURE_FLAG_X === 'enabled') {
	// code in here will be removed from the build output
	// if FEATURE_FLAG_X is not enabled
}

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

在 GitHub 上编辑此页面

上一页 下一页
invalidateAll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>