javascript - 如何在 SvelteKit 中创建简单的受保护路由？

Question

我正在尝试为我的 sveltekit 项目创建一个简单的受保护路线。但是，状态并没有改变。我想知道我在下面的代码中做错了什么？

这是我的 index.svelte 页面代码：

<script>
    import { goto } from '$app/navigation';
    import { user } from '../stores/store.js';
    const logInUser = () => {
        user.set(2);
        goto('/about');
    };
</script>

<button on:click={logInUser}>Log in</button>
<br />
<p>
    Direct Access to About Page.
    <a href="/about">About</a>
</p>
<slot />

这是我的 stores/store.js 文件代码：

import { writable } from 'svelte/store';

export const user = writable();

这是我想要防止未登录用户访问的 about.svelte 页面的代码：

<script>
    import { goto } from '$app/navigation';
    import { user } from '../stores/store.js';
    const logOutUser = () => {
        user.set(1);
        goto('/');
        console.log(user);
    };
    console.log(user);
</script>

{#if user > 1}
    <h1>Welcome!</h1>
    <br />
    <button on:click={logOutUser}>Log out</button>
{:else}
    <p>Protected Route <a href="/">home</a></p>
{/if}

<slot />

请帮忙。提前致谢。

标签： javascriptnode.jssveltesveltekit