SvelteKit中writable类型messageStore重定向后内容丢失问题

你在+page.server.ts的load函数中设置的messageStore是server端内存中的变量，每个请求都会创建新的store实例。当重定向到/login时，客户端浏览器会发起全新的请求，此时客户端的messageStore会重置为初始空值，因此Message组件无法读取到server端设置的消息。手动刷新时短暂显示是因为server端请求残留的临时状态，但这不是可靠的行为。

要实现跨重定向的消息传递，需要用Cookie来临时存储消息，客户端读取Cookie后显示并清除它。

1. 修改Server端重定向逻辑 #

在/admin/+page.server.ts中，不再直接设置messageStore，而是将消息写入Cookie：

import type { RequestEvent } from "@sveltejs/kit";
import { redirect } from '@sveltejs/kit';
import { redirectToStore } from "$lib/stores";

export const load = ({ locals, url, cookies }) => {
    if (!locals.user) {
        redirectToStore.set(url.pathname);
        // 设置Flash Message到Cookie
        cookies.set('flash-message', 'error.login.required', {
            path: '/',
            maxAge: 10, // 10秒后自动过期
            httpOnly: false, // 允许客户端读取
            secure: process.env.NODE_ENV === 'production' // 生产环境启用HTTPS时开启
        });
        throw redirect(302, "/login");
    }
};

2. 客户端读取Cookie并同步到Store #

在$lib/stores.ts中封装messageStore，让它在客户端初始化时自动读取Cookie并清除：

import { writable } from 'svelte/store';

function createMessageStore() {
    const { subscribe, set } = writable('');

    // 仅在客户端执行Cookie读取逻辑
    if (typeof window !== 'undefined') {
        const flashCookie = document.cookie.split('; ')
            .find(row => row.startsWith('flash-message='));
        
        if (flashCookie) {
            const message = decodeURIComponent(flashCookie.split('=')[1]);
            set(message);
            // 读取后立即清除Cookie，避免重复显示
            document.cookie = 'flash-message=; path=/; maxAge=0';
        }
    }

    return {
        subscribe,
        set
    };
}

export const messageStore = createMessageStore();
export const redirectToStore = writable('');

3. 保持原有组件逻辑不变 #

你的+layout.svelte和Message.svelte组件无需修改，messageStore会自动处理消息的读取和显示。

• Cookie的maxAge设置为10秒是为了避免消息残留，即使客户端没有及时清除，也会自动过期。
• 生产环境下建议开启secure选项，确保Cookie仅通过HTTPS传输。

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