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

问题描述 投票:0回答:2

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

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

getCookie()
setCookie()
,如此处 W3Schools - JavaScript Cookies 所示。但我无法访问该文档。我还尝试过从
cookie
npm 包进行序列化,如下所示,并且我还尝试使用浏览器,如下所示。

import { serialize } from "cookie";
import { browser } from '$app/environment';
javascript typescript cookies svelte sveltekit
2个回答
4
投票

您可以例如在表单操作中设置 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
中读取。


0
投票

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

document.cookie
,也可以使用
onMount
生命周期。

类似这样的:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.