使用 Firebase 身份验证在 SvelteKit 中存储身份验证信息的最佳位置？答案

【问题标题】：Best place to store auth information in SvelteKit with Firebase Auth?使用 Firebase 身份验证在 SvelteKit 中存储身份验证信息的最佳位置？
【发布时间】：2021-10-30 00:16:47
【问题描述】：

我是 SvelteKit 的新手，想确保我没有遗漏一些明显的东西。存储身份验证状态的最佳位置在哪里，以便我可以有效地授予/阻止对我的应用程序部分的访问 - 使用 Firebase 身份验证？

现在我将它存储在可写存储中。像这样：

import { writable } from 'svelte/store'
import type firebase from 'firebase/auth'

const authStore = writable<{
    isLoggedIn: boolean,
    user?: firebase.UserInfo
}>({
    isLoggedIn: false
})

然后在 __layout.svelte 我这样使用它：

onMount(() => {
    onAuthStateChanged(auth, (user) => {
        authStore.set({
            isLoggedIn: user != null,
            user
        })
    })
})

我应该补充一点，我使用静态适配器，因为我所有的“服务器”端代码都将在 Firebase Cloud Functions 中，并且不会使用端点。

但是在开发过程中我偶尔会遇到 SSR 问题...我不确定我是否可以（或应该）在 onMount 上使用 context="module" 等。

Svelte 和 SvelteKit 文档非常棒，但没有深入研究场景——例如跨页面维护身份验证的最佳实践等。

除此之外，到目前为止，SvelteKit + Firebase 一直是一个很棒的工作平台。

【问题讨论】：

标签： svelte sveltekit

【解决方案1】：

我通常用额外的浏览器检查来包装我的客户端内容。这有助于解决 ssr 问题。

import {browser} from '$app/env';
if (browser){
  onMount(() => {
    onAuthStateChanged(auth, (user) => {
        authStore.set({
            isLoggedIn: user != null,
            user
        })
    })
  })
}

我还注意到，当身份验证状态更改时，Firebase 的 onAuthStateChanged 事件通常会触发两次，这有点令人困惑。如果您搜索“firebase onauthstatechanged 运行两次”，则会在各个地方对此进行讨论。这并不能完全回答您的问题，但希望能为您节省一些时间。

【讨论】：