SvelteKit后端调用API传值至前端，令牌被莫名清空求助

问题原因 #

你遇到的核心问题是SvelteKit服务端渲染(SSR)与客户端 hydration 的状态隔离：

1. 服务端执行+page.server.ts的load函数时，会在服务器内存中创建token store并设置值，但这个状态不会自动同步到客户端。
2. 当页面渲染完成发送到浏览器后，客户端会重新加载stores.ts，创建一个全新的可写store（初始值为空字符串），此时客户端的store会覆盖SSR阶段渲染的内容，导致Token显示一秒后消失。

解决方案 #

方案1：通过Load函数传递数据（推荐，符合SvelteKit设计） #

利用SvelteKit的页面数据传递机制，把Token从服务端load函数返回给页面组件，再同步到store：

1. 修改+page.server.ts，在load中返回Token：

// +page.server.ts
export async function load() {
  // 替换为你的第三方API调用逻辑
  const response = await fetch('第三方API地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ /* 认证参数，如账号密码等 */ })
  });
  const tokenData = await response.json();
  const token = tokenData.access_token; // 根据API返回结构调整

  return { token };
}

2. 在+page.svelte中接收数据并同步到store：

<script lang="ts">
  import { token } from "../stores";
  export let data; // 接收服务端load返回的数据

  // 当data.token存在时，同步到store
  $: if (data.token) {
    token.set(data.token);
  }
</script>

<h1>{$token}</h1>

方案2：使用Cookie持久化Token（适合跨页面复用场景） #

如果需要Token在多个页面或页面刷新后保持，可以将Token存在Cookie中：

1. 服务端设置Cookie：

// +page.server.ts
import { cookies } from '@sveltejs/kit';

export async function load() {
  const token = await fetchThirdPartyToken(); // 你的Token获取逻辑

  // 设置Cookie，根据需求调整参数
  cookies.set('auth_token', token, {
    path: '/',
    httpOnly: false, // 允许客户端读取，若仅服务端使用可设为true
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict'
  });

  return { token };
}

2. 客户端从Cookie读取并同步到store：

<script lang="ts">
  import { token } from "../stores";
  import { onMount } from 'svelte';

  onMount(() => {
    // 解析Cookie获取Token
    const cookieToken = document.cookie
      .split('; ')
      .find(row => row.startsWith('auth_token='))
      ?.split('=')[1];
    
    if (cookieToken) {
      token.set(cookieToken);
    }
  });
</script>

<h1>{$token}</h1>

关键注意点 #

• SvelteKit的服务端与客户端是独立运行环境，全局store的状态不会自动在两端同步，必须通过数据传递（如load返回值、Cookie）来共享状态。
• 若Token需要长期保存，优先使用Cookie或localStorage，因为页面刷新后store会重置为初始值。

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