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

Question

我正在尝试在 svelte 中创建一个 cookie（并且我也在使用 svelte 套件）并访问它。我想使用 cookie 进行身份验证，更具体地说，是存储 JWT 令牌。

我尝试实现纯 JS 代码，例如

getCookie()

和

setCookie()

，如此处 W3Schools - JavaScript Cookies 所示。但我无法访问该文档。我还尝试过从

cookie

npm 包进行序列化，如下所示，并且我还尝试使用浏览器，如下所示。

import { serialize } from "cookie";

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

Answer 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 { 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

中读取。

Answer 2

如果你想将其设置在文件中的 script 标签中，那么你需要等待 DOM 加载。这意味着您可以在元素调用的函数中访问

document.cookie

，也可以使用

onMount

生命周期。

类似这样的：

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

我知道这篇文章很旧，但我也花了一些时间来解决这个问题。我希望它可以帮助别人。