SvelteKit中用Runes实现登出后清除用户状态及相关问题

背景信息 #

正在基于 Sveltekit 2.20.7/Svelte 5.27.0 实现应用认证功能，后端采用运行在8000端口的Express服务，使用express-session、connect-redis和passport，通过HTTP-only Cookie完成本地邮箱密码认证。

当前路由结构：

src
└── routes
    ├── (auth)
    │   ├── login
    │   │   ├── +page.svelte
    │   │   └── +page.ts
    │   └── signup
    │       ├── +page.svelte
    │       └── +page.ts
    ├── (news)
    │   └── [[news=newsMatcher]]
    │       └── [[tag]]
    │           ├── [id=idMatcher]
    │           │   └── [title]
    │           │       ├── +page.svelte
    │           │       └── +page.ts
    │           ├── +layout.server.ts (Call this two)
    │           ├── +layout.svelte
    │           ├── +layout.ts
    │           ├── +page.server.ts
    │           └── +page.svelte
    └── +layout.server.ts (Call this one)

我在最外层+layout.server.ts中发起GET请求检查用户登录状态，内层+layout.server.ts通过parent()转发用户信息，最终传递到+layout.ts。我理解该user变量会在所有内部布局和页面中可用，是否正确？

尝试用Runes实现了AuthStore类存储用户：

export class AuthStore {
  user = $state(null)

  login(user: {id: string, email: string, name: string} | null) {
    this.user = user
  }

  logout() {
    this.user = null
  }
}

问题解答 #

1. 用户登出时，如何将该用户变量设为null？ #

分两步处理：

• 后端会话销毁：先调用Express后端的登出接口（比如/api/logout），让后端清除Redis中的会话数据并重置HTTP-only Cookie。
• 前端状态重置：在前端登出请求成功后，调用AuthStore实例的logout()方法，将user设为null。

示例代码（比如在登出按钮的点击事件中）：

<script>
  import { authStore } from '$lib/stores/auth';

  async function handleLogout() {
    // 调用后端登出接口
    await fetch('http://localhost:8000/api/logout', {
      method: 'POST',
      credentials: 'include' // 携带HTTP-only Cookie
    });
    // 重置前端状态
    authStore.logout();
    // 跳转登录页
    window.location.href = '/login';
  }
</script>

<button on:click={handleLogout}>登出</button>

2. 当前在+layout.server.ts中获取会话的方式是否合适，有无更优方案？ #

当前通过最外层+layout.server.ts获取用户状态、内层用parent()传递的方式是可行的，但有更简洁的优化方案：

• 直接在共享布局中注入用户状态：在最外层+layout.server.ts中获取用户信息后，通过export async function load()返回user，这样所有子布局和页面（包括(news)下的内容）都能直接通过data.user访问，不需要内层+layout.server.ts再手动转发。
• 避免重复请求：如果每次load都发起GET请求检查会话，建议后端在响应中直接通过Cookie识别用户，返回当前会话的用户信息，无需额外请求。可以在Express中通过passport.authenticate('session')中间件自动处理会话校验，直接在接口中获取req.user。

最外层+layout.server.ts示例：

export async function load({ fetch }) {
  const res = await fetch('http://localhost:8000/api/user', {
    credentials: 'include'
  });
  const user = res.ok ? await res.json() : null;
  return { user };
}

这样所有子页面/布局都能通过export let data拿到data.user，无需内层+layout.server.ts再处理。

3. 上述Runes类应在何处使用？文档提到不能在+layout.server.ts中使用Runes，是否正确？ #

• Runes类的使用位置：AuthStore是前端状态管理类，应该在客户端代码中使用，比如：
  1. 在$lib/stores/auth.ts中创建单例实例：

     import { AuthStore } from './AuthStore';
     export const authStore = new AuthStore();
     

  2. 在+layout.svelte或其他客户端组件中导入该实例，绑定用户状态并同步服务端返回的user数据：

     <script>
       import { authStore } from '$lib/stores/auth';
       export let data;
     
       // 初始化同步服务端用户状态
       if (data.user) {
         authStore.login(data.user);
       } else {
         authStore.logout();
       }
     </script>
     

• 关于+layout.server.ts中不能用Runes：这个说法是正确的。+layout.server.ts是服务端代码，运行在Node.js环境中，而Runes是Svelte 5的客户端状态管理语法，依赖浏览器环境的响应式机制，不能在服务端代码中使用。

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