我正在尝试在 svelte 中创建一个 cookie(并且我也在使用 svelte 套件)并访问它。我想使用 cookie 进行身份验证,更具体地说,是存储 JWT 令牌。
我尝试实现纯 JS 代码,例如
getCookie()
和 setCookie()
,如此处 W3Schools - JavaScript Cookies 所示。但我无法访问该文档。我还尝试过从 cookie
npm 包进行序列化,如下所示,并且我还尝试使用浏览器,如下所示。
import { serialize } from "cookie";
import { browser } from '$app/environment';
您可以例如在表单操作中设置 cookie。如果您希望能够在浏览器中阅读它,则必须禁用
HttpOnly
(通常您应该避免这样做,因为它会使跨站点脚本漏洞变得更糟)。
一个简单的例子:
<!-- +page.svelte -->
<script lang="ts">
import { enhance } from '$app/forms';
export let form: { error?: string; } | null;
</script>
<form method="post" use:enhance>
<label>Login <input type="text" name="login" /></label>
<label>Password <input type="password" name="password" /></label>
{#if form?.error}<p>{form.error}</p>{/if}
<button type="submit">Login</button>
</form>
// +page.server.ts
import { invalid, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
export const actions: Actions = {
default: async ({ request, cookies }) => {
const formData = await request.formData();
const login = formData.get('login');
const password = formData.get('password');
if (login == 'admin' && password == '...') {
cookies.set(
'auth', '42',
{
path: '/',
maxAge: 60 * 60 * 24 * 365,
httpOnly: false, // <-- if you want to read it in the browser
},
);
throw redirect(302, '/');
}
return invalid(400, { error: 'Invalid login or password' });
},
}
可以从
document.cookie
读取cookie,注意这会在SSR期间抛出错误,所以你必须检查browser
或在onMount
中读取。
如果你想将其设置在文件中的 script 标签中,那么你需要等待 DOM 加载。这意味着您可以在元素调用的函数中访问
document.cookie
,也可以使用 onMount
生命周期。
类似这样的:
onMount(() => {
document.cookie = "theme=light";
});
我知道这篇文章很旧,但我也花了一些时间来解决这个问题。我希望它可以帮助别人。