Как я могу получить доступ к переменным data.user в lib/компонентах sveltekit, которые уже определены в макете.server.ts?
Я использую Sveltekit 4 с Supabase SSR для аутентификации. Я могу успешно получить доступ к данным сеанса пользователя с любой страницы маршрута, но не из каких-либо компонентов.
Вот мой src/routes/+layout.server.ts
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals: { getSession } }) => {
const session = await getSession();
return {
session
};
};
и мой src/routes/+page.svelte может успешно получить доступ к данным вошедшего в систему пользователя:
<script lang = "ts">
export let data;
</script>
{#if data.user}
<h2>Welcome {data.user.email}</h2>
{/if}
как я могу также получить доступ к данным вошедшего в систему пользователя в src/lib/components/Navigation.svelte, где я бы хотел, чтобы следующее работало:
<script lang = "ts">
export let data: any;
</script>
<h2>Not logged on</h2>
{#if data.user}
<h2>{data.user.email}</h2>
{/if}
Насколько я понимаю, данные в layout.server.ts будут доступны во всех маршрутах и компонентах. Как мне сделать их доступными в моем компоненте?
Ответы 1
Вы можете передавать данные через опору в компонент или использовать хранилище. Когда дело доходит до сеанса пользователя, вы можете использовать хранилище $page:
// src/routes/+layout.server.ts load function
return {
session
}
// your +page.svelte
import { page } from '$app/stores'
// access session with
$page.data.session
Как мы узнали ранее, магазины Svelte — это место, где можно хранить данные, которые не принадлежит отдельному компоненту.
SvelteKit делает три хранилища доступными только для чтения через
$app/storesмодуль —page,navigatingиupdated. Тот, который вы будете использовать чаще всего этоpage, который предоставляет информацию о текущей странице.