【问题标题】：How should I use cookies with Svelte and Sapper?我应该如何在 Svelte 和 Sapper 中使用 cookie？
【发布时间】：2020-04-09 21:42:24
【问题描述】：

我在一个项目中使用 Svelte 和 Sapper。假设我有一些代码需要在 cookie 运行之前读取它，并且该代码位于 /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 时？

【问题讨论】：

way to guarantee code only runs client-side 从服务器发送的 JS 文件在客户端运行，cookie 随请求发送到服务器 - 这就是你所需要的。
在 Svelte / Sapper 中，代码也在服务器端运行（并且失败）。
我的意思是，如果控制器将文件发送到客户端，它们将不再在服务器端进行解释。
在 Svelte + Sapper 中，这是不准确的。 Javascript 代码将在客户端、服务器或（通常）两者上执行。
您建议在将 js 发送到客户端 JS 后返回服务器并再次执行 - 我不这么认为。服务器端渲染是一回事，客户端的 JS 功能是另一回事。

标签： javascript sapper svelte-3

【解决方案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");
}

【讨论】：