SvelteKit 4中如何在组件中获取layout.server.ts的用户会话数据？

你遇到的问题本质是：+layout.server.ts中Load函数返回的数据仅会传递给对应的+layout.svelte和其子页面组件（如+page.svelte），不会自动渗透到项目lib目录下的独立组件中。下面是三种可行的解决方案：

方案1：通过Props传递数据 #

这是最直接的方式，利用布局组件作为中间层传递数据：

1. 在src/routes/+layout.svelte中，将从Load拿到的session作为props传给Navigation组件：

<script>
  export let data; // 这里的data就是+layout.server.ts返回的内容
  import Navigation from '$lib/components/Navigation.svelte';
</script>

<Navigation session={data.session} />

2. 在src/lib/components/Navigation.svelte中声明接收该props：

<script>
  export let session;
</script>

{#if session}
  <p>当前用户：{session.user.email}</p>
{:else}
  <a href="/login">登录</a>
{/if}

方案2：使用SvelteKit内置的page Store #

SvelteKit会将所有Layout/Page Load返回的数据整合到page store的data字段中，组件可以直接订阅这个store获取数据：
在Navigation.svelte中：

<script>
  import { page } from '$app/stores';
</script>

{#if $page.data.session}
  <span>欢迎，{$page.data.session.user.name}</span>
{:else}
  <button>去登录</button>
{/if}

注意：$page是自动订阅的语法，不需要手动调用subscribe方法。

方案3：自定义全局Store管理会话数据 #

如果你的项目中有大量组件需要访问用户会话，自定义Store会更便于维护：

1. 创建一个会话Store文件src/lib/stores/session.ts：

import { writable } from 'svelte/store';

export const sessionStore = writable(null);

2. 在src/routes/+layout.svelte中，将Layout Server Load返回的session同步到这个Store：

<script>
  import { sessionStore } from '$lib/stores/session';
  export let data;

  // 页面加载时同步会话数据
  $sessionStore = data.session;
</script>

3. 在Navigation.svelte中导入并使用这个Store：

<script>
  import { sessionStore } from '$lib/stores/session';
</script>

{#if $sessionStore}
  <div>用户ID：{$sessionStore.user.id}</div>
{/if}

内容的提问来源于stack exchange，提问作者j45lr