SvelteKit如何处理Cookie变更并刷新页面数据？

你的问题核心在于全局变量复用导致状态不更新，以及没有在每次请求时重新校验 Cookie 的有效性。以下是具体修复步骤和代码示例：

1. 移除全局状态，在每次请求中重新校验 Cookie #

不要在 handle 函数外部定义 isAuth 这类全局变量——服务器启动后全局变量会被所有请求共享，Cookie 修改后旧状态不会自动更新。正确的做法是在 hook.server.ts 的 handle 函数内，针对每个请求重新读取、验证 Cookie：

// hook.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  // 1. 每次请求都从当前请求的 cookies 中读取认证信息
  const authCookie = event.cookies.get('auth');
  
  let userRole = null;
  if (authCookie) {
    // 2. 执行你的 Cookie 验证逻辑（解密、查会话有效性、核对用户信息等）
    const validSession = await validateAuthSession(authCookie);
    if (validSession) {
      userRole = await fetchUserRoleBySession(authCookie);
    } else {
      // 3. 无效 Cookie 直接清除，避免残留
      event.cookies.delete('auth', { path: '/' });
    }
  }

  // 4. 将当前请求的验证结果挂载到 locals（每个请求的 locals 是独立的）
  event.locals.userRole = userRole;

  return resolve(event);
};

// 示例：验证 Cookie 有效性的函数
async function validateAuthSession(cookie: string): Promise<boolean> {
  // 实际逻辑：比如解密 JWT、查 Redis 确认会话未过期
  try {
    // 这里替换成你的真实验证逻辑
    return true;
  } catch {
    return false;
  }
}

// 示例：从有效 Cookie 中获取用户角色
async function fetchUserRoleBySession(cookie: string): Promise<string | null> {
  // 实际逻辑：从数据库/缓存中获取用户角色
  return 'admin'; // 示例返回值
}

2. 在 Layout Server Load 中直接读取最新的 locals #

+layout.server.ts 的 load 函数会在每次请求（包括客户端导航）时触发，直接从当前请求的 locals 中获取用户角色即可，不需要额外缓存：

// +layout.server.ts
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
  // 直接返回当前请求的用户角色，确保每次都是最新值
  return {
    userRole: locals.userRole
  };
};

3. 页面端响应式使用用户状态 #

页面中通过 data.userRole 判断登录状态时，SvelteKit 会自动响应 load 函数返回的最新数据——无论刷新页面还是客户端导航，都会拿到实时的验证结果：

<!-- +page.svelte -->
<script lang="ts">
  export let data;
</script>

{#if data.userRole}
  <div>已登录，当前角色：{data.userRole}</div>
{:else}
  <div>未登录，请登录</div>
{/if}

额外说明：客户端 Cookie 修改后的实时更新 #

如果用户手动修改 Cookie 但未刷新/导航页面，浏览器端无法直接监听 Cookie 变化。可以在关键操作（比如点击按钮、页面挂载）时，通过 fetch 发起一个轻量的服务器请求重新验证状态，或者定时检查（不推荐高频），确保页面状态与服务器保持一致。

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