SvelteKit客户端代码如何获取load的fetch？登录鉴权场景求解

方案一：封装客户端专属的认证Fetch函数 #

• 先写工具函数提取Cookie中的令牌：

  function getTokenFromCookie() {
    const cookieMap = document.cookie.split(';').reduce((acc, item) => {
      const [key, val] = item.trim().split('=');
      acc[key] = val;
      return acc;
    }, {});
    return cookieMap['your-token-key']; // 替换成实际的令牌Cookie名称
  }
  

• 封装全局认证Fetch，放在src/lib/utils/fetch.js中：

  export async function authFetch(url, options = {}) {
    const token = getTokenFromCookie();
    const headers = {
      ...options.headers,
      ...(token && { Authorization: `Bearer ${token}` }) // 按API要求的格式调整
    };
    return fetch(url, { ...options, headers });
  }
  

• 在客户端场景中使用该函数，注意用browser判断环境避免服务器端报错：

  import { browser } from '$app/environment';
  import { authFetch } from '$lib/utils/fetch';
  
  export async function load() {
    let privateData = null;
    if (browser) {
      privateData = await authFetch('/api/user-data').then(res => res.json());
    }
    return { privateData };
  }
  

方案二：全局劫持客户端Fetch自动加令牌 #

• 在src/hooks.client.js中注入全局处理逻辑，让所有客户端Fetch自动携带令牌：

  import { browser } from '$app/environment';
  
  if (browser) {
    const originalFetch = window.fetch;
    window.fetch = async function(url, options = {}) {
      const tokenMatch = document.cookie.split(';').find(c => c.trim().startsWith('your-token-key='));
      const token = tokenMatch?.split('=')[1];
      
      if (token) {
        options.headers = {
          ...options.headers,
          Authorization: `Bearer ${token}`
        };
      }
      return originalFetch(url, options);
    };
  }
  

• 配置后，客户端任何地方的Fetch请求都会自动带上令牌，无需手动替换。

关键注意点 #

• 确保令牌Cookie未设置HttpOnly属性，否则客户端JavaScript无法读取该Cookie，需要调整登录接口的Cookie配置。
• 令牌Cookie需设置合适的SameSite属性（如Lax），平衡安全性与跨域场景需求。
• 客户端处理令牌时注意XSS风险，避免将令牌暴露在全局变量或不必要的DOM中。

内容的提问来源于stack exchange，提问作者seung hwan Son