如何在Svelte Kit的服务器端load函数中访问JWT令牌？

嘿，这个问题其实是SvelteKit里很常见的一个误区——sessionStorage是浏览器专属的客户端存储，服务器端的load函数运行在Node.js/Edge环境里，完全没办法直接读取浏览器里的sessionStorage内容。所以你得换个思路，把令牌从客户端传递到服务器端才行。下面给你几个实用的解决方案：

方案1：通过请求头全局传递令牌 #

这是最常用的做法，核心是在客户端发起请求时把令牌塞进请求头，让服务器端能拿到：

• 首先在hooks.client.js里全局拦截客户端的请求，自动添加令牌头：

  // hooks.client.js
  export async function handleClientFetch({ request, fetch }) {
    const token = sessionStorage.getItem('jwt');
    if (token) {
      // 标准的Authorization Bearer格式
      request.headers.set('Authorization', `Bearer ${token}`);
    }
    return fetch(request);
  }
  

• 然后在服务器端的load函数里，从请求头里提取令牌：

  // +page.server.js
  import { redirect } from '@sveltejs/kit';
  
  export async function load({ request }) {
    const authHeader = request.headers.get('Authorization');
    if (!authHeader) {
      // 没有令牌，直接跳转到登录页
      throw redirect(303, '/login');
    }
  
    // 提取Bearer后面的令牌内容
    const token = authHeader.split(' ')[1];
    // 这里一定要做令牌验证（比如用jsonwebtoken库解析校验）
    // 验证不通过也跳登录
    // ...你的验证逻辑
  
    // 验证通过，返回数据给页面
    return { user: /* 解析令牌得到的用户信息 */ };
  }
  

方案2：改用HttpOnly Cookie存储令牌（更推荐） #

sessionStorage有个缺点：不能跨标签页共享，而且服务器端拿不到。换成HttpOnly Cookie会更安全，也更适配服务器端验证：

• 登录成功后，在服务器端的登录接口里设置Cookie：

  // routes/login/+server.js
  import { redirect } from '@sveltejs/kit';
  
  export async function POST({ request, cookies }) {
    // 这里写你的用户验证逻辑，生成JWT令牌
    const user = await validateUser(await request.json());
    const token = generateJwt(user);
  
    // 设置HttpOnly Cookie，客户端JS读不到，更安全
    cookies.set('jwt', token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production', // 生产环境用HTTPS
      sameSite: 'strict',
      maxAge: 60 * 60 * 24 // 有效期1天
    });
  
    throw redirect(303, '/dashboard');
  }
  

• 服务器端load函数直接从cookies里拿令牌，不用客户端额外处理：

  // +page.server.js
  import { redirect } from '@sveltejs/kit';
  
  export async function load({ cookies }) {
    const token = cookies.get('jwt');
    if (!token) {
      throw redirect(303, '/login');
    }
  
    // 验证令牌逻辑
    // ...
  
    return { user: /* 用户信息 */ };
  }
  

方案3：客户端路由守卫做补充 #

如果你的路由是客户端渲染的，还可以在根布局里加个客户端检查，防止用户直接输URL绕过服务器验证：

<!-- routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';

  onMount(() => {
    // 客户端挂载时检查sessionStorage里的令牌
    const token = sessionStorage.getItem('jwt');
    if (!token) {
      goto('/login');
    }
  });
</script>

<slot />

重要提醒 #

不管用哪种方案，服务器端的令牌验证是必须的，绝对不能只依赖客户端的检查——不然懂点技术的人很容易绕过客户端限制直接访问页面。

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