Как положить значение в page.data из form actions SvelteKit?
Только изучаю SvelteKit. Пытаюсь сделать авторизацию. Сделал вот так:
<script lang="ts">
import { goto } from "$app/navigation";
import Button from "$lib/components/Button.svelte";
import Input from "$lib/components/Input.svelte";
import { routes, USER_COOKIE_TOKEN_NAME } from "$lib/configs";
import IconSignIn from "$lib/icons/IconSignIn.svelte";
import type { User, UserSignin, UserSignup } from "$lib/models/users";
import { signin, signup } from "$lib/services/usersService";
import Cookies from "js-cookie";
import { jwtDecode } from "jwt-decode";
export let data;
if (data.user !== null) {
goto(routes.HOME);
}
async function onSubmit(event: SubmitEvent) {
event.preventDefault();
const formData = {};
for (const element of event.target!.elements) {
if (element.name && element.tagName === 'INPUT') {
formData[element.name] = element.value;
}
}
const userSignin: UserSignin = {
username: formData.username,
password: formData.password
};
const token = await signin(userSignin);
if (token === null) {
return;
}
let value: User | null = null;
try {
value = jwtDecode<User>(token.access_token);
}
catch (exception: unknown) {
/* empty */
}
data.user = value;
Cookies.set(USER_COOKIE_TOKEN_NAME, token.access_token);
goto(routes.HOME);
}
</script>
<h1>Войти в аккаунт</h1>
<form method="POST" on:submit={onSubmit}>
<Input name="mail" type="email" placeholder="Почта" />
<Input name="password" type="password" placeholder="Пароль" />
<Button type="submit" text="Войти" />
</form>
Но кажется, что это неправильная реализация. Есть ведь form actions. Но как с form actions можно положить текущего декодированного пользователя в page.data, чтобы он был доступен у всех дочерних компонентов?
И как потом считывать куки с токеном, если у него будет стоять флаг httpOnly? Кажется неправильным снимать этот флаг после установки.
Сервер с API у меня уже есть на питоне и await signin(userSignin); как раз отправляет запрос с помощью axios на вход.