SvelteKit endpoint重定向时如何向目标页面传递token数据

问题根源 #

302 重定向属于服务端跳转，浏览器收到302响应后会直接读取Location头跳转目标地址，原响应的body会被直接丢弃，自然无法在首页的endpoint里拿到body数据。

可行实现方案 #

方案1：通过Cookie传递token（优先推荐） #

安全性最高，搭配HttpOnly、Secure属性可以避免XSS攻击窃取token，改造你的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.ok) {
            const data = await verifiedCode.json()
            return {
                headers: {
                    location: '/',
                    // 可根据自身需求调整Cookie属性
                    'set-cookie': `token=${data.access_token}; Path=/; HttpOnly; Secure; SameSite=Lax`
                },
                status: 302
            }
        }
    }
}

后续你在首页的endpoint中直接读取请求携带的Cookie即可，若前端需要直接操作token，去掉HttpOnly属性后前端可通过document.cookie读取。

方案2：通过URL查询参数传递 #

实现最简单，适合非敏感场景：

return {
    headers: {
        location: `/?token=${encodeURIComponent(data.access_token)}`
    },
    status: 302
}

首页的endpoint可以通过request.query.get('token')取值，前端也可直接从$page.url.searchParams读取。注意该方式token会暴露在地址栏和浏览器历史记录中，安全性较低，建议前端拿到值后立即删除地址栏的对应参数。

方案3：通过服务端Session传递 #

如果你的项目已经接入了服务端session存储，可以直接把token存在session中：

// callback 端点存储token到session
request.locals.session.token = data.access_token
return {
    headers: { location: '/' },
    status: 302
}

// 首页端点读取session中的token
export async function get({ locals }) {
    const token = locals.session.token
    // 后续业务逻辑
}

该方式安全性也很高，不会把token暴露给客户端侧。

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