如何用SvelteKit对接外部REST API实现会话认证？

一、sessionid cookie的获取与传递 #

外部API返回的sessionid cookie，浏览器会自动存储（前提是API的Cookie配置了正确的SameSite、Domain等属性），无需手动提取也能在后续请求中携带：

• 同域场景：客户端发起fetch时添加credentials: 'include'，浏览器会自动带上对应cookie：

  // +page.svelte中请求示例
  const fetchProtectedData = async () => {
    const res = await fetch('https://your-api.com/protected', {
      credentials: 'include'
    });
    const data = await res.json();
  };
  

• 跨域场景：外部API必须在响应头设置Access-Control-Allow-Credentials: true，同时你的fetch请求也要加credentials: 'include'，且API的Cookie需配置合适的Domain和SameSite（跨域建议用SameSite: None，但要求HTTPS环境）。

如果需要手动提取sessionid（比如自定义请求头存储），可以通过document.cookie解析：

// 提取sessionid
const getSessionId = () => {
  const cookieArr = document.cookie.split('; ');
  const sessionCookie = cookieArr.find(item => item.startsWith('sessionid='));
  return sessionCookie ? sessionCookie.split('=')[1] : null;
};

// 手动在请求头携带
const res = await fetch('https://your-api.com/protected', {
  headers: {
    'Cookie': `sessionid=${getSessionId()}`
  }
});

二、认证逻辑的位置选择 #

1. 优先放在+page.server.ts的load函数 #

适合敏感页面的权限校验，因为+page.server.ts仅在服务器端执行，能直接安全读取cookie，且避免客户端篡改认证状态：

// +page.server.ts
export async function load({ cookies, fetch }) {
  const sessionId = cookies.get('sessionid');
  if (!sessionId) {
    throw redirect(302, '/login');
  }

  // 服务器端调用外部API校验会话有效性
  const res = await fetch('https://your-api.com/check-session', {
    headers: {
      'Cookie': `sessionid=${sessionId}`
    }
  });

  if (!res.ok) {
    throw redirect(302, '/login');
  }

  const userData = await res.json();
  return { userData };
}

优点：认证逻辑在服务端完成，安全性更高，可直接处理登录跳转。

2. 放在+page.ts的load函数 #

仅适合非敏感页面的轻量校验，因为+page.ts是客户端、服务端通用执行的：

• 服务端执行时可通过cookies读取sessionid，客户端执行时只能通过document.cookie或本地存储获取；
• 缺点：客户端侧的校验逻辑可能被篡改，风险较高。

三、客户端能否发起带凭证的请求？ #

不是所有请求都必须放在*.server.*文件中。客户端可以发起带凭证的fetch请求，只要满足：

1. 外部API配置了Access-Control-Allow-Credentials: true响应头；
2. 你的fetch请求添加了credentials: 'include'（同域也可用'same-origin'）；
3. Cookie的Domain、SameSite等属性符合跨域/同域要求。

如果外部API未配置跨域允许凭证，浏览器会拦截客户端请求，此时必须通过服务器端代理请求（不受浏览器跨域限制），示例如下：

// src/routes/api/protected-proxy/+server.ts
export async function GET({ cookies, fetch }) {
  const sessionId = cookies.get('sessionid');
  if (!sessionId) {
    return new Response('Unauthorized', { status: 401 });
  }

  const res = await fetch('https://your-api.com/protected-endpoint', {
    headers: {
      'Cookie': `sessionid=${sessionId}`
    }
  });

  const data = await res.json();
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
}

客户端请求代理接口即可：

// +page.svelte
const data = await fetch('/api/protected-proxy').then(res => res.json());

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