javascript - Hvordan oppretter jeg en cookie i Svelte og får tilgang til den?

Jeg prøver å lage en cookie i Svelte (og jeg bruker også Svelte Kit) og få tilgang til den. Jeg ønsker å bruke cookien til autentiseringsformål, mer spesifikt for å lagre en JWT-token.

Jeg har prøvd å implementere ren JS-kode, slik som getCookie() og setCookie() som vist her W3Schools - JavaScript Cookies. Men jeg får ikke tilgang til dokumentet. Jeg har også prøvd å serialisere fra cookie npm-pakken, som vist under, og jeg har også prøvd å bruke nettleseren som vist nedenfor.

import { serialize } from "cookie";

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

Svar #1

Du kan for eksempel sette en informasjonskapsel i en skjema-handling. Hvis du vil kunne lese den i nettleseren, må du deaktivere HttpOnly (generelt bør du unngå dette, da det gjør sårbarheter for cross site scripting værre).

Et enkelt eksempel:

<!-- +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' });
    },
}

Informasjonskapselen kan leses fra document.cookie, merk at dette vil gi en feil under SSR, så du må sjekke browser eller lese den i onMount.

Svar #2

Hvis du vil sette det i en script-tag i en fil, må du vente til DOM-en er lastet. Det betyr at du kan få tilgang til document.cookie i en funksjon som kalles av et element, eller du kan bruke onMount-livssyklus.

Noe som dette:

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

Jeg vet at innlegget er gammelt, men det tok meg litt tid å løse dette også. Jeg håper det kan hjelpe noen.