SvelteKit中如何在+layout.js的load函数内访问Cookies？

你遇到的报错是因为**+layout.js的load函数是通用加载函数，会在客户端和服务器端都执行**，而只有服务器端专属的加载文件（比如+layout.server.js、+page.server.js）才能直接获取cookies参数，客户端环境下这个参数是undefined，所以会抛出Cannot read properties of undefined (reading 'get')的错误。

解决方案 #

把获取Cookie的逻辑移到服务器端专属的加载文件中：

1. 创建+layout.server.js #

在layout同级目录下创建+layout.server.js，编写服务器端加载逻辑：

export function load({ cookies }) {
    return {
        jwt: cookies.get("jwt")
    };
}

2. 在+layout.svelte中使用数据 #

服务器端返回的data会自动传递给layout组件，直接通过export let data接收并渲染导航：

<script>
    export let data;
</script>

<nav>
    {#if data.jwt}
        <button>退出登录</button>
    {:else}
        <a href="/login">登录</a>
        <a href="/register">注册</a>
    {/if}
</nav>

<slot />

补充说明 #

• 如果你的JWT设置了HttpOnly属性，客户端无法通过document.cookie读取，必须通过服务器端加载函数传递，这也是更安全的做法。
• 若需要在客户端触发状态更新（比如退出登录后），可以调用后端接口清除Cookie，然后通过invalidate或goto方法刷新页面，让服务器端重新返回最新的Cookie状态。

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