在 PageLoad 中访问 SvelteKit 商店答案

【问题标题】：Accessing SvelteKit stores in PageLoad在 PageLoad 中访问 SvelteKit 商店
【发布时间】：2022-11-16 08:59:31
【问题描述】：

所以 - 如果我尝试访问 +page.js 中的可写对象，那么它只会返回空。

import { isAuthenticated, user } from '../../authstore';

export const load = async ({ fetch }) => {

    console.log ('doing load')
    console.log('is auth = ', isAuthenticated)

    if (! isAuthenticated) {
        throw redirect(302, '/');
    }

    return {test:''};
}

如您所见，我将其添加到 +page.js 以检查登录状态，如果没有，则将它们重定向到根目录。

但是 - isAuthenticated 不可访问。这是因为它在服务器而不是客户端上运行吗？

【问题讨论】：

标签： svelte sveltekit

【解决方案1】：

通常登录信息存储在 cookie 中；用户界面不能成为这方面的可靠权威。页面加载函数在客户端和服务器上运行（服务器端渲染发生在初始导航上），所以它不是处理这个问题的合适地方。

通常，您会使用 +page.server.js 或 +layout.server.js 文件，因为它们始终在服务器上运行。服务器文件中的加载函数可以访问cookies。如果您通过布局文件中的 cookie 检查登录状态，则可以为应用程序的整个子树设置一个检查位置。

然后可以将登录状态作为身份验证存储的初始值传递给页面或布局文件，然后可以在必要时在页面上动态更新。如果当前的身份验证完全不涉及服务器（例如通过某些第三方提供商），我建议查看有关如何将身份验证信息安全地传输到服务器的文档。

【讨论】：

好建议。我在 auth0 中接线。但是，我遇到的问题是我可以访问 page.svelte 中的商店，但无法访问 page.js 中的同一商店。我假设这应该是可能的？
不，不应该。如前所述，代码可能在服务器上运行，并且无法在客户端和服务器之间传递存储。此外，服务器不可能在访问单个对象实例时区分用户。

【解决方案2】：

+page.js 不能使用 $ 快捷方式从可写存储中访问值。我相信美元符号称为自动订阅，它在 Page.js 上不起作用

我的解决方案是在可写对象上使用订阅：

let authed = false;
isAuthenticated.subscribe(v => {
    authed = v
})
console.log('authuser', authuser)

这行得通。

作为 H.B.但是请注意，对于身份验证，您可能还需要考虑其他因素，例如使用会话数据。

【讨论】：

此外，当您订阅商店时，您通常还希望确保取消订阅（从subscribe 返回的调用函数）。对于自动订阅，Svelte 会在组件被销毁时自动执行此操作。