javascript - 我应该如何在 Svelte 和 Sapper 中使用 cookie？

Question

我正在为一个项目使用 Svelte 和 Sapper。假设我有一些代码需要在 cookie 运行之前读取它，并且该代码位于 /profile 的路由中。或者其他的东西。

我的理解是 Sapper 不保证代码将在哪里运行。如果我把代码放在常规 <script>标签或 onMount block ，当用户请求 /profile直接来自服务器，代码仍然在服务器上执行(并且失败)，但随后在客户端再次执行:

<script>
import { getCookie } from "../../myUtilities.js";

const myCookieValue = getCookie("myCookie");

async function myRuntimeAction() {
   let res = fetch(`https://www.example.com/api/${myCookieValue}`);
   ...
}
</script>

<form on:submit|preventDefault={myRuntimeAction}>
    <button>
      Take Action!
    </button>
</form>

是否有一种惯用的 Svelte/Sapper 方式来保证代码仅在客户端运行时，它可以访问 cookie？

Answer 1

我找到了两种方法来解决这个问题:
1. 访问仅在运行时客户端执行的函数内部的 cookie
问题的根源是我的变量声明是顶级声明。只需将访问 cookie 的代码移动到仅在运行时调用的函数中即可解决问题:

async function myRuntimeAction() {
   const myCookieValue = getCookie("myCookie");
   let res = fetch(`https://www.example.com/api/${myCookieValue}`);
   ...
}

2. 在尝试访问 cookie 之前检查 process.browser
slim 暴露 process.browser确保代码仅在浏览器中执行:

if (process.browser) {
    const myCookieValue = getCookie("myCookie");
}