我应该如何将 cookie 与 Svelte 和 Sapper 一起使用？

Question

我在一个项目中使用 Svelte 和 Sapper。假设我有一些代码需要在运行之前读取 cookie，并且该代码位于 say/profile或某处的路由中。

我的理解是 Sapper 不保证代码将在何处运行。如果我将代码放在常规<script>标签或onMount块中，当用户/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

Svelte 公开process.browser以确保代码仅在浏览器中执行：

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