如何使用静态适配器为 svelte-kit 制作受保护的路由处理程序？答案

【问题标题】：How do I make a protected route handler for svelte-kit using static adapter?如何使用静态适配器为 svelte-kit 制作受保护的路由处理程序？
【发布时间】：2022-01-13 04:27:54
【问题描述】：

似乎所有的解决方案都需要 ssr（我们没有使用）。我使用的是adapter-static，用户存储在localStorage，所以SSR无论如何都不起作用。

我正在尝试保护需要在 svelte-kit 中登录的页面：

<script context="module">
    import { authGuard } from '@lib/guard.js';

    export async function load({ page, fetch, session, context }) {
        return await authGuard({ page, fetch, session, context });
    }
</script>

<script>
    import { page } from '$app/stores';
    import NavBar from '../components/NavBar.svelte';
    import TopNav from '../components/TopNav.svelte';

    let currentPage;

    page.subscribe((path) => (currentPage = path));
</script>

{#if currentPage.path === '/login'}
    <main class="sans-navbar">
        <TopNav />
        <section>
            <slot />
        </section>
    </main>
{:else}
    <main>
        <NavBar />
        <section>
            <slot />
        </section>
    </main>
{/if}

<style>
    main {
        display: flex;
        justify-content: flex-start;
        min-height: 100vh;
    }

    main.sans-navbar {
        flex-direction: column;
    }

    section {
        padding: 2.4rem;
        width: 100%;
        min-height: 100vh;
        background-color: #f2f6fa;
    }
</style>

这是guard.js 库：

import { LoggedIn } from '../stores/user';

export async function authGuard({ page }) {
    console.log(LoggedIn, page);
    if (LoggedIn && page.path === '/login') {
        return { status: 302, redirect: '/' };
    } else if (LoggedIn) {
        return {};
    } else {
        return { status: 302, redirect: '/login' };
    }
}

export default {
    authGuard
};

问题是LoggedIn需要localStorage，所以SSR解决方案不起作用。

【问题讨论】：

顺便说一句，您应该为商店使用$，以便为您处理退订。而不是将page 的值存储到currentPage，只需使用$page。

标签： routes sveltekit

【解决方案1】：

我使用了您在 Stack Overflow 上提供的代码。您可以找到使用 localStorage 保护某些路由的示例。 https://github.com/MathieuDoyon/svelte-kit-static-protected-route

您可以在 svelte.config.js 中更改 ssr: false 以禁用所有路由或禁用/启用每页 export const ssr = false; https://kit.svelte.dev/docs#ssr-and-javascript-ssr

在页面上将 srr 设置为 false 不会将内容生成到从构建创建的静态 HTML 页面中。

【讨论】：