SvelteKit表单提交后无法获取redirectTo参数导致重定向失败

问题场景 #

在SvelteKit项目中，部分路由（如/movies）需要认证才能访问，未登录用户会被重定向到/login?redirectTo=%2Fmovies。但登录表单提交后，login/+page.server.ts中无法获取URL上的redirectTo查询参数，控制台输出的URL不含该参数。

路由结构 #

routes
│     ├── +page.svelte
│     ├── login
│     │   ├── +page.server.ts
│     │   └── +page.svelte
│     └── movies
│         ├── +page.server.ts
│         ├── +page.svelte
│         └── [id]
│             ├── +page.server.ts
│             ├── +page.svelte
│             └── +page.ts

原login/+page.server.ts核心代码 #

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

export const actions = {
    login: async ({request, cookies, url}) => {
        console.log("url", url)
        const formData = await request.formData();
        const data = { email: formData.get('email'), password: formData.get('password')}
        // 认证逻辑...
        const redirectTo = url.searchParams.get('redirectTo') || '/'
        redirect(303, redirectTo);
    }
}

控制台输出的URL信息 #

url URL {
  href: 'http://localhost:5173/login?/login',
  searchParams: URLSearchParams { '/login' => '' },
  // 其他信息...
}

解决方案 #

通过在表单的use:enhance钩子中，将redirectTo参数附加到表单数据中，传递到action里解决该问题。

修改后的login/+page.svelte代码 #

<script lang="ts">
  import { enhance } from "$app/forms";
  import { page } from "$app/stores";
  let currentUrl = $page.url.href;
  const url: URL = new URL(currentUrl);
  const redirectTo: string = url.searchParams.get("redirectTo") ?? "";
</script>

<h1>Login</h1>
<form
  method="POST"
  action="?/login"
  use:enhance={({ formData }) => {
    formData.append("redirectTo", redirectTo);
  }}
>
  <label
    >Email
    <input name="email" type="email" required />
  </label>
  <label
    >password
    <input name="password" type="password" required />
  </label>
  <button>Log in</button>
</form>

修改后的login/+page.server.ts核心代码 #

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

export const actions = {
    login: async ({request, cookies}) => {
        const formData = await request.formData();
        const data = { 
            email: formData.get('email'), 
            password: formData.get('password'), 
            redirectTo: formData.get("redirectTo")
        }
        // 认证逻辑...
        const redirectTo = data.redirectTo != null ? data.redirectTo.toString() : "/"
        redirect(303, redirectTo);
    }
}

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