SvelteKit SPA未登录时重定向至登录页并携带原路径参数问题

1. 服务器端处理（覆盖首次加载/全页刷新） #

在SvelteKit的根+layout.server.ts中添加加载逻辑，这是处理服务端渲染场景的核心：

import type { LayoutServerLoad } from './$types';
import { redirect } from '@sveltejs/kit';

export const load: LayoutServerLoad = async ({ request, url }) => {
    // 调用ASP.NET后端接口获取当前登录用户信息
    const authResponse = await fetch('https://your-aspnet-backend/api/auth/current-user', {
        headers: {
            cookie: request.headers.get('cookie') || '' // 传递认证Cookie
        }
    });

    // 未登录且当前不是登录页，触发重定向
    if (!authResponse.ok && !url.pathname.startsWith('/user/login')) {
        const returnUrl = encodeURIComponent(url.pathname + url.search);
        throw redirect(302, `/user/login?returnUrl=${returnUrl}`);
    }

    // 已登录则返回用户信息供页面使用
    return {
        user: authResponse.ok ? await authResponse.json() : null
    };
};

这个逻辑会在首次加载、全页刷新时直接在服务端完成检查和重定向，完全适配你的需求。

2. 客户端处理（覆盖客户端导航） #

在根+layout.svelte中保留beforeNavigate，处理应用内跳转的场景（比如点击链接、客户端路由切换）：

<script>
    import { beforeNavigate } from '$app/navigation';
    import { browser } from '$app/environment';

    if (browser) {
        beforeNavigate(async ({ to, cancel }) => {
            // 跳过登录页的检查，避免循环重定向
            if (to?.url.pathname.startsWith('/user/login')) return;

            // 调用后端接口验证登录状态
            const authResponse = await fetch('/api/auth/current-user', { credentials: 'include' });
            if (!authResponse.ok) {
                cancel(); // 取消原导航
                const returnUrl = encodeURIComponent(to?.url.pathname + to?.url.search || '');
                window.location.href = `/user/login?returnUrl=${returnUrl}`;
            }
        });
    }
</script>

<slot />

用browser判断确保代码仅在客户端执行，避免服务端渲染时出错。

3. 登录页处理returnUrl #

登录成功后，读取returnUrl参数并跳转回原路径：

在登录页的+page.svelte中：

<script>
    import { page } from '$app/stores';
    import { goto } from '$app/navigation';

    async function handleLogin() {
        // 调用ASP.NET后端完成登录逻辑
        const loginSuccess = await yourLoginApiCall();
        
        if (loginSuccess) {
            // 读取returnUrl，默认跳转到首页
            const returnUrl = $page.url.searchParams.get('returnUrl') || '/';
            await goto(decodeURIComponent(returnUrl));
        }
    }
</script>

额外注意 #

• 若前后端域名不同，需确保ASP.NET后端配置了跨域支持，并且fetch请求添加credentials: 'include'以传递认证Cookie。
• 多租户场景下，可在重定向时携带租户标识（如tenantId查询参数），确保登录后回到对应租户的邀请页面。

内容的提问来源于stack exchange，提问作者synergetic