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

Question

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

Answer 1

我找到了两种解决方法：

1。访问只会在运行时在客户端执行的函数内部的 cookie

问题的根源在于我的变量声明是顶级声明。只需将访问 cookie 的代码移动到仅在运行时调用的函数中即可解决问题：

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

2。在尝试访问 cookies

之前检查 process.browser

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

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

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

How should I use cookies with Svelte and Sapper?

javascript

sapper

svelte-3

1。访问只会在运行时在客户端执行的函数内部的 cookie

2。在尝试访问 cookies