6

我在一个项目中使用 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？

4

1 回答 1

4

我找到了两种方法来解决这个问题：

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");
}
于 2019-12-17T13:00:26.777 回答