使用 Firebase 和 Svelte 的受保护路由

Question

我正在尝试创建一个受保护的页面，即我的项目的配置文件页面。如果他们没有登录，我想把他们赶出去。我正在尝试尽可能简单地做到这一点。我找到了这个教程，但它是 TypeScript，我无法让它工作。 Link >

我的方式：个人资料页面：

let auth = getAuth();

    onMount(() => {
        auth.onAuthStateChanged((user) => {
            if (!user) {
                goto('/signin');
            }
        });
    });

Answer 1

我们的想法是拥有一个用户存储并将其与 onAuthStateChanged

的组合一起使用

import authStore from '../stores/authStore';; // <~ stores.ts 
import { onMount } from 'svelte';

let auth = getAuth();

onMount(() => {
  //shift this method to a firebase.ts
  auth.onAuthStateChanged((user) => {
    if (user) {
      authStore.set({
        user,
      });
    } else {
      authStore.set({
        user: null,
      });
    }
  });
});

// this block will watch changes on the store
$: {
  if (!$authStore.user) {
    if (browser) goto('/login');
  } else {
    if (browser) goto('/');
  }
}

使用 Firebase 和 Svelte 的受保护路由

Protected Route With Firebase and Svelte

firebase

svelte

sveltekit