使用Remix时调用Session.get后Session.flash未被清除的问题

问题描述（翻译自英文提问） #

我使用Session.flash向用户展示闪信，但调用Session.get后该闪信仍持续存在。具体场景如下：

登录成功后携带闪信重定向：

const session = await getSession(request.headers.get("Cookie"));
session.flash(FLASH_MESSAGE_KEY, message);
request.headers.get("Cookie");
return redirect(redirectTo, {
    headers: {
        "Set-Cookie": await commitSession(session),
    },
});

随后在新页面的下一次请求中访问会话上下文：

export const getContext = async (request: Request) => {
    let user = await authenticator.isAuthenticated(request);
    const isAuthenticated = user !== null;
    const session = await getSession(request.headers.get("Cookie"));
    const flash = session.get(FLASH_MESSAGE_KEY) || null;
    return {
        isAuthenticated,
        user: user ?? ANON_USER,
        flash,
    };
};

// ...

export const loader = async ({ request }: LoaderArgs) => {
    const context = await getContext(request);
    return json({
        context,
    });
};

请问我哪里操作有误？

核心原因 #

你没有在读取闪信后提交更新的会话。Remix的flash消息机制是：当你调用session.get()读取闪信时，会话会标记该消息为待清除，但这个清除操作只有在调用commitSession()并将新的Set-Cookie头返回给客户端时才会生效。你当前仅读取了闪信，未同步会话状态到客户端，所以闪信会一直保留在会话中。

修正方案 #

修改getContext和loader，在读取闪信后提交会话并更新响应头的Cookie：

export const getContext = async (request: Request) => {
    let user = await authenticator.isAuthenticated(request);
    const isAuthenticated = user !== null;
    const session = await getSession(request.headers.get("Cookie"));
    const flash = session.get(FLASH_MESSAGE_KEY) || null;
    // 读取闪信后提交会话，标记清除该消息
    const updatedSessionCookie = await commitSession(session);
    
    return {
        isAuthenticated,
        user: user ?? ANON_USER,
        flash,
        updatedSessionCookie
    };
};

export const loader = async ({ request }: LoaderArgs) => {
    const context = await getContext(request);
    // 返回数据时移除cookie字段，仅在响应头中设置更新后的Cookie
    const { updatedSessionCookie, ...contextData } = context;
    
    return json(
        { context: contextData },
        {
            headers: {
                "Set-Cookie": updatedSessionCookie
            }
        }
    );
};

关键说明 #

• session.flash()的作用是将消息标记为“一次性”，但实际清除依赖commitSession()同步会话状态到客户端
• 必须在每次读取闪信后提交会话，否则闪信会持续存在于会话中
• 不要将updatedSessionCookie暴露给前端，仅通过响应头传递即可

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