时间戳

首页 > 解决方案 > Sapper.js - 预加载 cookie/标题？

javascript - Sapper.js - 预加载 cookie/标题？

问题描述

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

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

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

但是我需要在呈现页面之前让客户端可以使用此动态内容，以避免出现难看的空内容。所以应该在 sapper 的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对象，而不是尝试将其提供给客户端。

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

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

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

有什么想法吗？

标签： javascriptauthenticationaws-lambdasveltesapper

解决方案

您可以{ 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 随请求一起发送。但是，根据定义，这不适用于导出的应用程序 - 必须为每个用户构建响应。

推荐阅读