如何在SvelteKit中通过Authorization头将JWT传入+page.server.ts

核心思路 #

通过客户端主动在页面请求和action提交时添加Authorization请求头，在服务端的+page.server.ts中读取该头并传递给内部的API调用，既保留SvelteKit的load/actions特性，又满足JWT仅存于客户端内存的需求。

1. 处理load函数的令牌传递 #

客户端登录获取token后，若需要触发load函数重新加载页面数据，可以通过fetch调用当前路由并携带授权头，再更新页面数据：

<!-- +page.svelte -->
<script>
  import { page } from '$app/stores';

  // 登录后存在内存中的token
  let authToken = '';

  // 登录成功后触发带授权的页面数据刷新
  async function refreshPageData() {
    const res = await fetch(window.location.pathname, {
      headers: {
        'Authorization': `Bearer ${authToken}`
      }
    });

    if (res.ok) {
      $page.data = await res.json();
    }
  }
</script>

在服务端的load函数中，读取请求头并传递给内部API：

// +page.server.ts
export async function load({ fetch, request }) {
  const authHeader = request.headers.get('Authorization');

  const apiRes = await fetch(myEndpoint, {
    headers: {
      // 仅当存在授权头时传递给后端API
      ...(authHeader && { Authorization: authHeader })
    }
  });

  return (await apiRes.json()).data;
}

2. 处理actions的令牌传递 #

使用SvelteKit的use:enhance指令拦截表单提交请求，手动添加授权头：

<!-- +page.svelte -->
<script>
  // 内存中的token
  let authToken = '';
</script>

<form 
  method="POST" 
  action="?/someAction" 
  use:enhance={({ request }) => {
    // 修改请求，注入授权头
    return new Request(request, {
      headers: {
        ...Object.fromEntries(request.headers),
        'Authorization': `Bearer ${authToken}`
      }
    });
  }}
>
  <!-- 表单字段 -->
  <button type="submit">提交</button>
</form>

在服务端的action中，读取授权头并传递给API调用：

// +page.server.ts
export const actions = {
  someAction: async ({ request, fetch }) => {
    const authHeader = request.headers.get('Authorization');
    const formData = Object.fromEntries((await request.formData()).entries());

    const apiRes = await fetch(myApiEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...(authHeader && { Authorization: authHeader })
      },
      body: JSON.stringify(formData)
    });

    if (!apiRes.ok) {
      return { error: '提交失败' };
    }

    return { success: true };
  }
};

方案优势 #

• 严格遵循"JWT仅存于客户端内存"的要求，刷新页面令牌自动丢失，符合预期行为
• 完全保留SvelteKit的load和actions特性，无需放弃框架带来的优势
• 采用标准的Authorization: Bearer头传递令牌，适配未来移动端Flutter等框架的API调用规范

注意事项 #

• 客户端需将token存储在组件状态或全局内存store中，禁止使用localStorage/sessionStorage
• 页面初始加载（未登录状态）时，load函数不会获取到授权头，需提前处理未授权逻辑

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