重定向 sveltekit 端点并将数据传递到页面答案

【问题标题】：Redirect sveltekit endpoint and pass data to page重定向 sveltekit 端点并将数据传递到页面
【发布时间】：2023-03-26 22:25:01
【问题描述】：

我正在使用 oauth 登录服务。登录后，应用程序会将我的应用程序重定向到设置的重定向 uri，该 uri 也指向我的 sveltekit 端点 (/callback)。在我验证代码并通过端点获取令牌后，我想使用令牌数据将客户端重定向/发送回主页，但我不知道该怎么做。

我目前尝试过的：

export async function get(response: IncomingRequest) {
    if (response.query.has('code')) {
        const code = response.query.get('code')
        const url = `url endpoint to verify code above`

        const verifiedCode = await fetch(url, {
            method: 'POST',
            headers: { 'Accept': 'application/json' }
        })

        if (verifiedCode) {
            const data = await verifiedCode.json()
            // redirect to homepage and give token to client
            // tried:
            return {
                headers: {
                    location: '/'
                },
                body: data,
                status: 302
            }
        }
    }
}

在我的主页的get() 端点中记录响应会导致正文为空，无论我将正文放在此端点中的什么内容。

【问题讨论】：

与github.com/sveltejs/kit/issues/1711相关的声音

标签： svelte sveltekit

【解决方案1】：

您希望谁在客户端处理body: data？主页？客户端浏览器一收到 302，就会开始导航。

正确的方法是发送一个“set-cookie”作为 HTTP 302 标头的一部分。客户端浏览器将保存此 cookie，并将其与将来的任何请求一起发送到服务器。显然，它也可以访问它。

在下面的情况下，客户端浏览器会将 cookie 命名为“令牌”并假设您的令牌或 verifiedCode 有一个到期日期，您也可以将其设置为（以秒为单位）Max-Age。

return {
    headers: {
        location: '/',
        'set-cookie': `token=${data}; SameSite=Strict; Max-Age=${tokenAge}`
    },
    status: 302
}

如果您想在用户调用端点时再次在服务器上接收verifiedCode，您可以使用response.headers.cookie 读取它。

【讨论】：

【解决方案2】：

如果您想要一种简单的方法来访问由 OAuth 提供程序在客户端生成的令牌值，那么您可以将该信息作为查询参数添加到重定向请求中。

因此，您可以保留所有内容，只需将该令牌信息添加到位置值即可。假设 verifyCode 是一个如下所示的对象：

const verifiedCode = {
    access_code: "eydkfsladkljdks..."
}

然后您可以像这样添加该键值对：

export async function get(response: IncomingRequest) {
    if (response.query.has('code')) {
        const code = response.query.get('code')
        const url = `url endpoint to verify code above`

        const verifiedCode = await fetch(url, {
            method: 'POST',
            headers: { 'Accept': 'application/json' }
        })

        if (verifiedCode) {
            const data = await verifiedCode.json()
            // redirect to homepage and give token to client
            // tried:
            return {
                headers: {
                    location: `/?access_token=${verifiedCode.access_token}`
                },
                body: data,
                status: 302
            }
        }
    }
}

然后可以使用 $page 存储从 index.svelte 访问此查询参数。使用 $page.query.get('access_token') 获取值。

【讨论】：