通过 SvelteKit 表单操作发送查询参数

Question

我使用 SvelteKit 创建了一个网站。我正在使用 form action 来处理登录表单。

src/routes/(beforeAuth)/login/+page.svelte

有登录表格

<form use:enhance method="post" action="/login?/login">

    <label>Username:</lable>
    <input type="text" name="username" />

    <label>Password:</lable>
    <input type="password" name="password" />

    <Button text="Sign In" type="submit" />
<form>

src/routes/(beforeAuth)/login/+page.server.js

有登录操作

export const actions = {
    login: async ({ cookies, request }) => {
        const data = await request.formData();
        let body
            try{
                 body = await api.post("account/login/", {
                    username: data.get('username'),
                    password: data.get('password')
            });
            }catch(err) {
                return {
                    message: "username or password is not vailid",
                    login: false
                }
            }
            
        if (body.status === 401) {
            return fail(401, { tryAgain: true })
        
        }
        if(body.status == 400) {
            return {
                message: body.data.message,
                login: false
            }
        }
        
        if(body.status == 200) {
            const value = btoa(JSON.stringify(body));
            cookies.set('jwt', value, { secure: false, path: '/', maxAge:60 * 60 * 6 });
            redirect(307, '/my-profile')
        
        } else {
            return {
                message: "username or password is not vailid",
                login: false
            }
        }
    },
    logout: async ({ cookies, locals }) => {
        cookies.delete('jwt', {path:'/'});
        locals.user = null;
    },
};

此登录表单和操作运行良好。但现在我想通过表单操作发送查询参数。所以我尝试将操作设置为

/login?/login?redirect=some-path

例如

<form use:enhance method="post" action="/login?/login?redirect=some-path">

这给了我错误

SvelteKitError: No action with name 'login?redirect' found

在 SvelteKit 中通过表单操作发送查询参数的正确方法是什么？

Answer 1

表单/操作文档的重定向小节使用查询字符串参数来执行可选的重定向（这也是您的目标），所以我们知道这是可能的。

由于形式 name 源自特殊的命名法（即通过在查询参数前添加

/

前缀），因此很自然地假设在 URL

/login?/login

中，

?

标记查询字符串的开头，因此额外的

?

将按字面意思理解（因此，您的后端查找名为

login?redirect

的操作时会出现错误）。

我假设正确的格式是

/login?/login&redirect=some-path

，其中

?

标记查询字符串的开头，

/login

是第一个参数（并且因为

/

被解析为操作名称），

&

是一个标准的查询分隔符，并且

redirect=some-path

should 然后被正确解析。

关于正确访问和使用该参数，我再次建议您参考上面的示例（使用

url

访问器和

searchParams

属性）。