如何访问 sveltekit 中 lib/components 中已在 layout.server.ts 中定义的 data.user 变量？

Question

我正在使用 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

中的数据将在所有路由和组件中可用，我如何使其在我的组件中可用？

Answer 1

您可以通过 prop 将数据传递到组件或使用 store。 当涉及到用户会话时，您可以使用 $page store:

import { page } from '$app/stores'
// access session with
$page.data.session

“正如我们之前了解到的，Svelte 存储是放置不属于单个组件的数据的地方。

SvelteKit 通过 $app/stores 模块提供三个只读存储 - 页面、导航和更新。您最常使用的是页面，它提供有关当前页面的信息” https://learn.svelte.dev/tutorial/page-store