SvelteKit SPA中如何实现用户鉴权与页面重定向？

针对你遇到的重定向不生效、循环跳转、预加载误触发问题，以下是落地性强的解决方案：

核心问题分析 #

你之前的代码存在三个关键问题：

1. 客户端load中用subscribe异步回调抛出redirect，此时load函数已执行完毕，SvelteKit无法捕获该异常
2. 使用goto未判断当前路径，导致无限循环跳转
3. 预加载触发load时未做区分，鼠标hover链接就会触发重定向

步骤1：统一管理鉴权状态与逻辑 #

先封装鉴权状态Store和通用验证函数，避免重复代码并减少API请求：

// src/lib/stores/auth.ts
import { writable } from 'svelte/store';
import { firstValueFrom } from 'rxjs'; // 把Observable转为Promise
import { apiAuth } from '$lib/services/api'; // 你的API服务

export const isAuthenticated = writable(false);
export const user = writable<{ id: string; name: string } | null>(null);

// 验证JWT并同步状态
export async function verifyAuth(cookies: any): Promise<boolean> {
  const jwt = cookies.get('JWT');
  if (!jwt) {
    isAuthenticated.set(false);
    user.set(null);
    return false;
  }

  try {
    // 把Observable转为Promise，让load函数能等待结果
    await firstValueFrom(apiAuth.verify());
    // 可选：拉取用户信息
    // const userInfo = await firstValueFrom(apiAuth.getUser());
    // user.set(userInfo);
    isAuthenticated.set(true);
    return true;
  } catch (error) {
    // 验证失败，清除无效Cookie
    cookies.delete('JWT', { path: '/' });
    isAuthenticated.set(false);
    user.set(null);
    return false;
  }
}

步骤2：路由组Layout中实现鉴权与重定向 #

针对(unauthed)和(authed)两个路由组，分别在+layout.ts中添加鉴权逻辑，区分预加载与实际导航，并判断当前路径避免循环：

未登录用户专属路由组 (unauthed)/+layout.ts #

import type { LayoutLoad } from './$types';
import { redirect } from '@sveltejs/kit';
import { verifyAuth } from '$lib/stores/auth';

export const load: LayoutLoad = async ({ cookies, url, navigation }) => {
  const authenticated = await verifyAuth(cookies);

  // 仅在实际导航时执行重定向，预加载时跳过
  if (navigation.type !== 'preload') {
    // 已登录且当前不在dashboard，才重定向
    if (authenticated && !url.pathname.startsWith('/dashboard')) {
      throw redirect(302, '/dashboard');
    }
  }

  return {};
};

已登录用户专属路由组 (authed)/+layout.ts #

import type { LayoutLoad } from './$types';
import { redirect } from '@sveltejs/kit';
import { verifyAuth } from '$lib/stores/auth';

export const load: LayoutLoad = async ({ cookies, url, navigation }) => {
  const authenticated = await verifyAuth(cookies);

  // 仅在实际导航时执行重定向，预加载时跳过
  if (navigation.type !== 'preload') {
    // 未登录且当前不在登录/注册页，才重定向
    if (!authenticated && !['/login', '/register'].includes(url.pathname)) {
      throw redirect(302, '/login');
    }
  }

  return {};
};

步骤3：登录/登出时同步状态 #

在登录/登出的服务器端Action中，更新Cookie和Store状态：

登录Action login/+page.server.ts #

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

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email') as string;
    const password = data.get('password') as string;

    // 调用登录API
    const res = await fetch('https://your-api.com/auth/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
      headers: { 'Content-Type': 'application/json' }
    });

    if (!res.ok) return { error: '登录失败' };

    const { jwt } = await res.json();
    // 设置HttpOnly Cookie
    cookies.set('JWT', jwt, {
      path: '/',
      httpOnly: true,
      secure: import.meta.env.PROD,
      maxAge: 60 * 60 * 24 * 7 // 有效期7天
    });

    throw redirect(302, '/dashboard');
  }
};

登出Action dashboard/+page.server.ts #

import type { Actions } from './$types';
import { redirect } from '@sveltejs/kit';
import { isAuthenticated, user } from '$lib/stores/auth';

export const actions: Actions = {
  logout: async ({ cookies }) => {
    cookies.delete('JWT', { path: '/' });
    // 同步更新客户端状态
    isAuthenticated.set(false);
    user.set(null);
    throw redirect(302, '/login');
  }
};

关键优化点说明 #

1. Observable转Promise：用firstValueFrom把API的Observable转为Promise，确保load函数等待鉴权完成后再执行后续逻辑，让throw redirect能被SvelteKit正确捕获
2. 区分预加载：通过navigation.type判断是否为预加载，避免鼠标hover链接时误触发重定向
3. 路径判断：每次重定向前检查当前路径，彻底避免循环跳转
4. 状态同步：登录/登出时同步更新Store和Cookie，保证客户端与服务端状态一致

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