Sapper.js - 预加载 cookie/headers？

Question

我正在使用 Sapper.js 为我的应用程序提供支持，但仅使用通过运行sapper export创建的静态内容。 所以没有服务器渲染页面。

我将 AWS CloudFront 与 Lambda@Edge 结合使用，以便在用户请求页面时对用户的HttpOnly cookie 执行身份验证。 如果用户通过身份验证，Lambda 将获取用户数据，例如用户的个人资料图片、用户名等，并在 CloudFront 返回的页面上的自定义标头/cookie（非 HttpOnly）中设置这些值。

这些值可以在标头或 cookie 中设置，两者都没有要求。

但是我需要在呈现页面之前让客户端可以使用这些动态内容，以避免出现丑陋的空内容闪烁。 因此，应该在onMount的preload函数而不是onMount中检索它，以便在数据返回之前阻止任何其他 html 的呈现。

我知道如何在preload函数内部获取，如下所示：

<script context="module">
    export async function preload(page, session) {
        const res = await this.fetch("SOME_ENDPOINT");
        const data = await res.json();

        return {data};
    }
</script>

但我不确定如何从该函数中访问标头或 cookie。

编辑：新方法？

所以我一直在想，目前看来最好的方法是尝试转换 Sapper 的sapper.middleware函数，使其接受自定义req对象并返回res对象，而不是尝试将其提供给客户端.

然后我们可以运行npm run build并使用 Lambda 中的整个build目录。 之后我们可以自由地将任何用户数据传递到中间件session对象中，如文档中所述：

sapper.middleware({session: (CUSTOM_REQ, CUSTOM_RES) => ({user: CUSTOME_REQ.user})})

无需获取任何数据，因为它现在应该在store可用。

有什么想法吗？

Answer 1

您可以将{ credentials: true }作为第二个选项传递给this.fetch （与常规fetch相同）：

export async function preload(page, session) {
    const res = await this.fetch("SOME_ENDPOINT", {
        credentials: true
    });
    const data = await res.json();

    return {data};
}

这将导致 cookie 与请求一起发送。 但是，根据定义，这不适用于导出的应用程序 - 必须为每个用户构建响应。