PocketBase JS SDK 在 SvelteKit 中的混合认证实现

问题背景

在使用 PocketBase JS SDK 配合 SvelteKit 框架开发时，开发者常常会遇到需要同时支持客户端(CSR)和服务端(SSR)认证的场景。一个典型的问题表现为：客户端登录后可以正常维持认证状态，但在页面刷新时服务端无法正确识别已认证状态。

核心问题分析

这个问题通常源于 Cookie 的 HttpOnly 标志设置不当。当开发者仅在客户端设置 Cookie 而没有在服务端正确配置时，会导致以下情况：

1. 客户端可以读取和写入认证 Cookie
2. 服务端无法正确读取客户端设置的 Cookie
3. 页面刷新时服务端渲染无法获取认证状态

解决方案

正确的 Cookie 设置方式

要实现完整的混合认证流程，需要在服务端和客户端都进行正确的 Cookie 处理：

服务端处理 (hooks.server.ts):

export async function handle({ event, resolve }) {
    event.locals.pb = new PocketBase(PUBLIC_DB_URL);
    const cookie = event.request.headers.get('cookie') || '';
    event.locals.pb.authStore.loadFromCookie(cookie);

    if (event.locals.pb.authStore.isValid) {
        event.locals.user = event.locals.pb.authStore.model;
    }

    const response = await resolve(event);
    response.headers.set('set-cookie', 
        event.locals.pb.authStore.exportToCookie({ httpOnly: false }));
    return response;
}

客户端处理 (hooks.client.ts):

import pb from '$lib/pocketbase/pb';

export async function handle({ event, resolve }) {
    pb.authStore.loadFromCookie(document.cookie);
    
    pb.authStore.onChange((token, model) => {
        document.cookie = pb.authStore.exportToCookie({ httpOnly: false });
    });

    return await resolve(event);
}

关键配置说明

1. httpOnly: false：必须同时在服务端和客户端设置，允许客户端 JavaScript 访问 Cookie
2. Cookie 同步：服务端和客户端都需要处理 Cookie 的读取和写入
3. 状态共享：通过 event.locals 在服务端和客户端之间共享认证状态

安全注意事项

虽然这种混合认证模式提供了灵活性，但也带来了潜在的安全风险：

1. 跨站请求伪造：由于 Cookie 可被 JavaScript 访问，增加了跨站请求伪造的风险
2. 跨站脚本攻击：如果应用存在跨站脚本问题，攻击者可能窃取认证 Cookie
3. 敏感数据暴露：服务端渲染时要注意不要泄露敏感信息到客户端

建议仅在确实需要服务端渲染认证内容时才使用这种模式，否则纯客户端认证是更安全的选择。

最佳实践建议

1. 评估是否真正需要服务端渲染认证内容
2. 考虑使用更安全的认证方式，如 JWT 配合短期有效期
3. 实现跨站请求伪造保护机制
4. 严格过滤服务端渲染的内容，避免敏感数据泄露
5. 定期审计认证流程的安全性

通过正确配置和谨慎实施，可以在 SvelteKit 中安全地实现 PocketBase 的混合认证方案。