SvelteKit中通过表单动作传递查询参数的正确方式

你之前的错误是因为action路径写法有误，/login?/login?redirect=some-path会让SvelteKit错误地将login?redirect识别为action名称，导致找不到对应动作。以下是几种正确实现方式：

方式一：直接在action路径后拼接查询参数 #

这是最直接的方式，将redirect参数放在登录页面路径的查询字符串中：

表单代码（src/routes/(beforeAuth)/login/+page.svelte） #

<form method="POST" action="/login?redirect=/dashboard">
  <div>
    <label>用户名：</label>
    <input type="text" name="username" required />
  </div>
  <div>
    <label>密码：</label>
    <input type="password" name="password" required />
  </div>
  <button type="submit">登录</button>
</form>

服务端action代码（src/routes/(beforeAuth)/login/+page.server.js） #

在action中通过url.searchParams获取redirect参数：

export const actions = {
  default: async ({ request, url }) => {
    // 解析表单数据
    const formData = await request.formData();
    const username = formData.get('username');
    const password = formData.get('password');

    // 获取redirect参数，默认跳转到首页
    const redirectTo = url.searchParams.get('redirect') || '/';

    // 替换为实际登录验证逻辑
    const isLoginSuccess = true;

    if (isLoginSuccess) {
      // 登录成功后重定向到目标路径
      return {
        status: 303,
        headers: {
          Location: redirectTo
        }
      };
    }

    // 登录失败返回错误信息
    return {
      error: '用户名或密码错误'
    };
  }
};

方式二：动态获取redirect参数 #

如果redirect参数是从其他页面跳转时携带的（比如访问需登录页面被重定向到登录页），可以在组件中动态读取并设置：

<script>
  import { page } from '$app/stores';
  // 从当前页面查询参数中获取redirect，默认值为首页
  const redirectTo = $page.url.searchParams.get('redirect') || '/';
</script>

<form method="POST" action="/login?redirect={redirectTo}">
  <!-- 表单内容同方式一 -->
</form>

方式三：通过隐藏表单字段传递redirect参数 #

如果不想将redirect参数暴露在URL中，可使用隐藏字段传递：

表单代码 #

<form method="POST" action="/login">
  <input type="hidden" name="redirect" value="/dashboard" />
  <!-- 其他表单字段 -->
  <button type="submit">登录</button>
</form>

服务端action代码 #

通过formData.get('redirect')获取参数：

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const redirectTo = formData.get('redirect') || '/';

    // 登录逻辑...
  }
};

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