SvelteKit SPA:如果用户未以原始路径作为查询参数登录,则重定向到登录页面

这不是您想要在客户端实现的。

假设登录状态是通过被邀请用户的机器上是否存在会话cookie来跟踪的,那么您将希望使用服务器端中间件进行邀请路由,其逻辑如下:

• 如果请求携带有效的会话cookie,则用户将登录并按照请求处理邀请
• 否则重定向到以原始请求作为 returnUrl 参数

显然,您的登录实现还应该执行重定向到 returnUrl 成功登录后,或者默认重定向到您选择的页面(如果该参数不存在)。

因为这是在服务器端处理的,所以这也将在您的全浏览器刷新场景中发挥作用。

经过一番尝试,我在root中想出了以下代码 +layout.svelte :

<script lang="ts">
    import { page } from '$app/stores';
    import { goto } from '$app/navigation';
    import http from "utilities/http";
    import User from "./User";
    import { currentUser, selectTenant } from "./appModel";
    ...

    let initialized = false;

    const url = $page.url;
    if (/* logged-in user required for the url */)
        http.get("/api/user/info")
        .then(async (res) => {
            if (res.ok) {
                currentUser.set(User.create(await res.json()));
                selectTenant("last");
            }
            else {
                const returnUrl = `${url.pathname}${url.search}`;

                // Await goto, otherwise 'returnlUrl' component
                // (or root page) may start mounting! 
                if (returnUrl !== "/") {
                    await goto(`/user/login?returnUrl=${returnUrl}`);
                }
                else {
                    await goto("/user/login");
                }
            }
            initialized = true;
        });
    }
    else {
        initialized = true;
    }

    ...

</script>

{#if initialized}
{#if $currentUser}
    <Navbar ... />
    <StatusBar ... />
    <slot />
{:else}
     <StatusBar ... />
     <slot />
{/if}
{/if}