SvelteKit adapter-static路由守卫重定向失效问题排查与解决

你使用adapter-static构建的是纯静态站点，服务端的handle钩子仅在构建阶段（预渲染页面时）执行，不会在用户刷新页面的客户端请求流程中运行。

登录后客户端确实成功设置了authCookie，但刷新/app路径时，浏览器直接请求静态服务器上的预渲染文件——而构建预渲染/app页面时，不存在用户的登录cookie，所以handle钩子会生成重定向到/login的响应，最终静态服务器返回的就是这个重定向内容，导致你刷新后被强制跳回登录页。

要让权限守卫在静态构建产物中正常工作，必须将权限校验逻辑迁移到客户端：

1. 清理服务端钩子中的路由守卫代码 #

删除hooks.js里针对/app路径的权限校验逻辑，保留其他必要代码。

2. 在客户端实现路由守卫 #

方式一：通过布局组件校验 #

在/app目录下的+layout.svelte中添加客户端校验逻辑：

<script>
  import { goto } from '$app/navigation';
  import { browser } from '$app/environment';

  if (browser) {
    // 从客户端cookie中读取authCookie
    const authCookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('authCookie='))
      ?.split('=')[1];
    
    if (!authCookie) {
      goto('/login');
      return;
    }

    try {
      const userData = JSON.parse(decodeURIComponent(authCookie));
      // 可将用户数据存入本地状态或全局store
      window.__userData = userData;
    } catch (err) {
      goto('/login');
    }
  }
</script>

<slot />

方式二：通过客户端load函数校验 #

在/app/+layout.js中编写客户端专属的load逻辑：

import { goto } from '$app/navigation';
import { browser } from '$app/environment';

export async function load() {
  if (!browser) return;

  const authCookie = document.cookie
    .split('; ')
    .find(row => row.startsWith('authCookie='))
    ?.split('=')[1];
  
  if (!authCookie) {
    goto('/login');
    return;
  }

  try {
    const userData = JSON.parse(decodeURIComponent(authCookie));
    return { user: userData };
  } catch (err) {
    goto('/login');
    return;
  }
}

关键注意点 #

• 客户端校验仅能实现前端层面的权限控制，若涉及敏感接口请求，仍需后端接口额外校验用户权限
• 确保设置authCookie时指定了正确的path（建议设为/），避免cookie无法在/app路径下被读取

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