SvelteKit如何实现readable store仅客户端初始化？

开发者阿泽

2026-8-15

解决SvelteKit中客户端专属Readable Store的初始化问题

你的问题核心是SvelteKit的服务端渲染会执行独立.ts模块中的代码，导致依赖客户端环境的fetchToken在服务端运行时出错。以下是无需将代码移入.svelte组件的解决方案：

方案一：利用SvelteKit环境变量限制客户端执行

SvelteKit提供了browser变量来区分当前运行环境，我们可以用它让初始化逻辑仅在客户端触发：

修改auth.ts如下：

// auth.ts
import { readable } from 'svelte/store';
import { browser } from '$app/environment';

export const authToken = readable("", (set) => {
  const updateToken = async () => {
    const token = await fetchToken(); // 你的客户端令牌获取逻辑
    set(token);
  };

  // 仅在浏览器环境下执行初始化
  if (browser) {
    updateToken();
  }

  // 可选：返回清理函数（比如取消令牌监听等）
  return () => {
    // 按需添加清理逻辑
  };
});

原理说明

browser变量由SvelteKit自动注入，服务端渲染时为false，客户端运行时为true
这样updateToken只会在浏览器环境中执行，避免服务端因调用客户端专属API而报错

方案二：手动触发初始化（备选）

如果需要严格在组件onMount时机初始化，可导出初始化函数并在根组件调用（虽需修改一个组件，但属于全局一次性操作）：

修改auth.ts：

// auth.ts
import { readable } from 'svelte/store';

let tokenSetter: (value: string) => void;

export const authToken = readable("", (set) => {
  tokenSetter = set;
  return () => {};
});

export const initAuthToken = async () => {
  const token = await fetchToken();
  tokenSetter(token);
};

在根布局组件（如+layout.svelte）中调用：

<script>
  import { onMount } from 'svelte';
  import { initAuthToken } from '$lib/auth';

  onMount(async () => {
    await initAuthToken();
  });
</script>