SvelteKit中服务器端获取密码恢复access_token问题求助

方案一：客户端直接解析hash参数（最通用） #

因为#后的hash内容仅在客户端可见，直接在回调页面的客户端代码中读取并处理即可：

1. 在密码恢复回调页（比如src/routes/recovery-callback/+page.svelte）中，利用SvelteKit的$page store获取当前URL的hash，再解析参数：

<script>
    import { page } from '$app/stores';
    import { onMount } from 'svelte';

    let accessToken;

    onMount(() => {
        // 截取hash开头的#，用URLSearchParams解析参数
        const hashParams = new URLSearchParams($page.url.hash.slice(1));
        accessToken = hashParams.get('access_token');
        const tokenType = hashParams.get('token_type');
        const type = hashParams.get('type');

        // 获取到token后的操作示例：发送到后端验证
        if (accessToken) {
            fetch('/api/verify-recovery-token', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ access_token: accessToken, token_type: tokenType })
            })
            .then(res => res.json())
            .then(data => {
                // 根据验证结果跳转至重置密码页或处理错误
                if (data.valid) {
                    window.location.href = '/reset-password';
                }
            });
        }
    });
</script>

<!-- 页面内容：显示加载状态或提示信息 -->
{#if accessToken}
    <p>正在验证恢复令牌...</p>
{:else}
    <p>无效的恢复链接</p>
{/if}

方案二：修改认证服务的redirect_url配置（最优雅） #

如果你的密码恢复服务支持配置参数传递方式，直接将redirect_url改为不带hash的路径，让服务把参数放在URL的query部分（比如http://localhost:5173/recovery-callback?access_token=xxx&token_type=bearer&type=recovery）。

这样就能在SvelteKit的服务器端代码中直接获取参数：

// src/routes/recovery-callback/+page.server.js
export async function load({ url }) {
    const accessToken = url.searchParams.get('access_token');
    const tokenType = url.searchParams.get('token_type');
    const type = url.searchParams.get('type');

    // 服务器端直接处理验证逻辑
    if (accessToken) {
        const isValid = await verifyRecoveryToken(accessToken);
        if (isValid) {
            return { accessToken, isValid: true };
        }
    }

    return { isValid: false };
}

方案三：客户端将hash转为query参数后重定向（折中方案） #

如果必须保留hash格式，但需要服务器端处理参数，可以在客户端先把hash参数转为query，再重定向到同一页面：

<!-- src/routes/recovery-callback/+page.svelte -->
<script>
    import { page } from '$app/stores';
    import { goto } from '$app/navigation';
    import { onMount } from 'svelte';

    onMount(() => {
        const { hash } = $page.url;
        if (hash) {
            // 解析hash参数转为query字符串
            const queryString = new URLSearchParams(hash.slice(1)).toString();
            // 重定向到同一页面并替换历史记录（避免重复跳转）
            goto(`${$page.url.pathname}?${queryString}`, { replaceState: true });
        }
    });
</script>

之后就能在服务器端的+page.server.js中通过url.searchParams获取参数，逻辑同方案二。

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