SvelteKit全局页面获取用户信息的优化方案咨询（解决登录后页面显示延迟问题）

兄弟我太懂你这个糟心的体验了！登录跳转后首页先闪一下登录按钮，再变成用户名，这完全是因为客户端的onMount是组件挂载后才跑的，这时候初始的“未登录”状态已经渲染出来了，等拿到用户数据再更新就会有延迟。

不过你说的那种「全局共享服务端逻辑」的东西真的存在！就是SvelteKit里的**+layout.server.ts**，你之前可能记错了，它正好是用来解决这种所有页面都需要的全局数据（比如用户登录状态）的，完全不用每个+page.server.ts都复制一遍代码，一步搞定全局用户状态传递。

下面给你一步步说怎么实现：

第一步：用根+layout.server.ts全局获取用户信息 #

在你的项目根目录（也就是放+layout.svelte的地方）创建一个+layout.server.ts文件，里面写服务端的load函数，从cookies里读取session并获取用户信息：

import type { LayoutServerLoad } from './$types';

// 这里替换成你实际的验证session、获取用户信息的逻辑
async function verifySessionAndGetUser(sessionId: string) {
  // 比如调用后端接口，根据sessionId拿到用户的name、avatar等数据
  const user = await fetch(`/api/user/${sessionId}`).then(res => res.json());
  return user;
}

export const load: LayoutServerLoad = async ({ cookies }) => {
  const sessionId = cookies.get('sessionId');
  let user = undefined;

  if (sessionId) {
    try {
      user = await verifySessionAndGetUser(sessionId);
    } catch (err) {
      // 如果session无效，可以清空cookie或者做其他处理
      cookies.delete('sessionId');
    }
  }

  // 返回的user会自动传递给所有页面的layout和page
  return { user };
};

第二步：在根+layout.svelte里直接使用用户数据 #

修改你的根+layout.svelte，直接从服务端传递过来的data里拿用户信息，不用再等客户端的onMount：

<script lang="ts">
  import type { PageData } from './$types';
  // 接收从layout.server.ts的load函数返回的数据
  export let data: PageData;
</script>

<header>
  {#if data.user}
    Hello {data.user.name}
  {:else}
    <a href="/login">Login</a>
  {/if}
</header>

<!-- 子页面的内容会渲染在slot里 -->
<slot />

为什么这能解决延迟问题？ #

因为+layout.server.ts的load函数是在服务器端渲染阶段就执行的，当页面返回给浏览器的时候，已经根据cookie里的session信息渲染好了正确的内容——要么是用户名，要么是登录按钮，完全不会有客户端异步获取数据导致的闪烁问题。而且所有页面都会继承这个根layout的逻辑，不用每个页面重复写验证代码。

额外补充：客户端也需要用户数据怎么办？ #

如果你的子组件或者页面需要在客户端逻辑里用到用户信息，可以再创建一个根+layout.ts（客户端的load函数），把服务端传递过来的user数据暴露给客户端：

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = ({ data }) => {
  // 把服务端的user数据传递给客户端的所有页面和组件
  return { user: data.user };
};

这样任何子页面的组件里，只需要export let data就能拿到data.user，不用再从cookie里重新读取验证。

备注：内容来源于stack exchange，提问作者Basic Coder