SvelteKit程序化导航实现及用户认证后页面重定向问题

服务端场景（如表单提交的server load/action、API路由） #

服务端环境下必须用SvelteKit的redirect函数，核心是要抛出该函数而非普通调用，这是你之前重定向失效的关键：

import { redirect } from '@sveltejs/kit';

// 在load函数中使用
export async function load({ cookies }) {
  // 模拟认证校验逻辑
  const isAuthenticated = cookies.get('auth_token') !== undefined;
  if (isAuthenticated) {
    // 认证完成后重定向到根路径
    throw redirect(302, '/');
  }
}

// 在表单action中使用
export async function action({ request, cookies }) {
  const data = await request.formData();
  // 处理登录认证逻辑
  const loginSuccess = true; // 假设认证成功
  if (loginSuccess) {
    cookies.set('auth_token', 'valid_token', { path: '/' });
    // 抛出redirect触发服务端重定向
    throw redirect(302, '/');
  }
}

redirect需传入状态码（通常用302临时重定向）和目标路径，必须通过throw触发才能生效。

客户端场景（如页面组件内、交互事件） #

客户端环境使用goto函数，要确保仅在浏览器环境中调用（避免在服务端渲染阶段执行）：

<script>
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';

  // 组件挂载后执行客户端跳转
  onMount(() => {
    // 认证完成后跳转首页
    goto('/');
  });

  // 点击事件中触发跳转
  async function handleLogin() {
    const res = await fetch('/api/login', { method: 'POST' });
    if (res.ok) {
      goto('/');
    }
  }
</script>

<button on:click={handleLogin}>登录后跳转首页</button>

若在服务端渲染时调用goto，就会触发Cannot call goto(...) on the server错误，因此要把goto放在客户端专属逻辑里（如onMount、点击事件）。

通用封装：适配服务端/客户端的统一跳转 #

如果你需要类似NuxtnavigateTo的通用方法，可以自己封装工具函数自动区分环境：

// src/lib/utils/navigate.js
import { goto } from '$app/navigation';
import { redirect } from '@sveltejs/kit';
import { browser } from '$app/environment';

export function navigateTo(path, status = 302) {
  if (browser) {
    // 客户端用goto跳转
    goto(path);
  } else {
    // 服务端抛出redirect实现重定向
    throw redirect(status, path);
  }
}

使用时直接导入调用即可：

import { navigateTo } from '$lib/utils/navigate';

// 服务端load/action中
export async function load() {
  navigateTo('/');
}

// 客户端组件中
onMount(() => {
  navigateTo('/');
});

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