javascript - 我如何在 svelte 中创建 cookie 并访问它？

我正在尝试在 Svelte 中创建一个 cookie（我也在使用 Svelte Kit）并访问它。我想将这个 cookie 用于身份验证目的，更具体地说，是用于存储 JWT 令牌。

我尝试实现纯 JS 代码，比如 getCookie() 和 setCookie()，如 W3Schools - JavaScript Cookies 所示。但我无法访问 document。我还尝试了使用 cookie npm 包的 serialize，如下所示，也尝试了如下面所示的在浏览器中使用。

import { serialize } from "cookie";

import { browser } from '$app/environment';

答案＃1

例如，你可以在表单动作中设置一个 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 { fail, 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
                },
            );
            redirect(302, '/');
        }
        return fail(400, { error: 'Invalid login or password' });
    },
}

可以通过 document.cookie 读取 cookie，请注意，这在服务器端渲染（SSR）期间会抛出错误，因此你必须检查 browser 或在 onMount 中读取它。

答案＃2

如果你想在文件中的 script 标签中设置它，那么你需要等到 DOM 加载完毕。这意味着你可以在由某个元素调用的函数中访问 document.cookie，或者你可以使用 onMount 生命周期。

像这样的东西：

onMount(() => {
        document.cookie = "theme=light";
});

我知道这篇帖子很旧，但我也花了一些时间才解决这个问题。我希望它能帮助到某些人。