SvelteKit中Hook数据无法传递到页面Load函数的问题

我正在使用SvelteKit通过服务器Hook中的JWT解码处理用户认证，已成功将用户数据存储在event.locals.user中（日志显示{ user: { id: '1', email: 'useremail@yahoo.com' } }），但在+page.svelte的load函数中通过session.user访问该数据时始终返回undefined，请求指导解决方向。

Hook逻辑代码 #

const sessionUser: SessionUser = {
  id: decoded.sub, 
  email: decoded.email, 
};

(event.locals as any).user = sessionUser; 
console.log("event.locals", event.locals);

} catch (error) {
  console.error("JWT verification error:", error);
  (event.locals as any).user = null; 
}
} else {
  (event.locals as any).user = null;
}

return await resolve(event);
};

+page.svelte测试代码 #

export const load: Load = ({ session }) => {
  const user = session.user;

  if (user) {
    let login = true;
  } else {
    let login = false;
  }

};

解决方向 #

• 手动同步locals到session：SvelteKit不会自动将event.locals.user映射到session，需在handle钩子中显式处理。比如在resolve后，将locals用户数据存入Cookie会话（注意添加安全属性）：

  const response = await resolve(event);
  if (event.locals.user) {
    response.headers.set('set-cookie', `session=${encodeURIComponent(JSON.stringify(event.locals.user))}; Path=/; HttpOnly; SameSite=Lax`);
  }
  return response;
  

• 配置类型定义：避免使用any，在src/app.d.ts中明确类型，帮助排查类型不匹配问题：

  declare namespace App {
    interface Locals {
      user: SessionUser | null;
    }
    interface Session {
      user: SessionUser | null;
    }
  }
  

• 区分服务器/客户端load：如果是客户端运行的load函数（如开启ssr: false），无法直接获取服务器端event.locals，需通过+layout.server.ts传递数据：

  // src/routes/+layout.server.ts
  export async function load({ locals }) {
    return { user: locals.user };
  }
  

  之后在+page.svelte的load中通过data.user访问：

  export const load = ({ data }) => {
    const user = data.user;
    // 后续逻辑
  };
  

• 检查会话中间件配置：如果使用自定义或官方会话方案，需确保中间件在JWT解码后，正确将locals.user赋值到session对象中。

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