如何使用sveltekit的adapter-static实现带有重定向的路由保护？

Question

我的客户端应用程序遇到了一些问题。该应用程序在开发期间按预期工作，但构建的捆绑包未按预期工作。

我认为我的问题来自于此。

我有

hooks.js

，代码如下：

export const handle = async ({ event, resolve }) => {
    const authCookie = event.cookies.get('authCookie');
    if (event.url.pathname.startsWith('/app')) {
        if (typeof authCookie === 'undefined') {
            return new Response(null, {
                status: 302,
                headers: {
                    location: '/login'
                }
            });
        }

        try {
            const userData = JSON.parse(decodeURIComponent(authCookie));
            event.locals.user = userData;
            return await resolve(event, {});
        } catch (err) {
            return new Response(null, {
                status: 302,
                headers: {
                    location: '/login'
                }
            });
        }
    }
    return await resolve(event, {});
};

一旦用户登录，

authCookie

就会在

login

路由中设置。

问题是，当我浏览构建的包时，我可以成功登录，并且 cookie 似乎已设置，但是当我刷新页面时，我被重定向到登录页面。

什么可能导致此问题以及如何使我的身份验证防护在静态构建的包中工作？

Answer 1

handle

是一个服务器挂钩，它不在客户端上运行，因此根本无法与静态站点一起使用。 （注意

vite preview

不准确，仍然会执行。）

如果您想在客户端检查 cookie 并重定向，您可以在

load

函数中执行此操作，例如在布局根 (

src/routes/+layout.js

)。请注意，您只能访问已设置且

HttpOnly

为 false 的 cookie；它们可以通过

document.cookie

属性获得。通常不建议这样做，因为如果不受信任的 JS 最终在网站上运行，它可能会窃取这些 cookie。