如何使用NextJS服务器操作在客户端和服务器之间转发cookie

06odsfpq  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(162)

我目前正在试用NextJS 14,以了解它如何改善我们的客户端用户体验。我们目前有一个非常大的SPA,加载缓慢,其中大部分客户端在定期访问时不会使用。我正在研究如何或是否可以使用SSR,动态渲染等工具来提高客户端的性能。
我们现有的身份验证流程是相当标准的。身份验证数据从客户端的SPA发送到服务器(通过. POST JSON),并交换为与其会话相关的Cookie。在非常高的级别上,它看起来像这样:


的数据
我们的API太大而无法重写,因此我们正在考虑使用NextJS作为客户端和API之间的中间层。类似于:



我们试图理解如何使用服务器操作,通过NextJS在客户端和服务器之间转发cookie。例如,我们目前有这样一个自定义层,用于POST请求:

function post<T>(path: string, body: object, _headers?: Record<string, string>) {
    return fetch(requestUrl(path), {
        method: 'POST',
        credentials: 'include',
        headers: { ..._headers, 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    }).then(handleResponse<T>);
}

字符串
我们如何从服务器代理cookie,从我们的服务器动作中的获取请求到客户端(反之亦然)?

wlsrxk51

wlsrxk511#

最后,我选择了这个:

import setCookieParser from 'set-cookie-parser';
import { cookies } from 'next/headers';

export const proxyServerCookies = async (cookieNames: string[], response: Response) => {
    if (response.headers.has('set-cookie')) {
        const cookieString = response.headers.get('set-cookie')!;
        const cookieObject = setCookieParser.parse(setCookieParser.splitCookiesString(cookieString), {
            map: true,
        });

        cookieNames.forEach((cookieName) => {
            if (cookieObject[cookieName]) {
                const cookie = cookieObject[cookieName];

                console.debug(`[API Request] Proxying cookie ${cookieName} to client.`);

                cookies().set(cookieName, cookie.value, {
                    path: cookie.path,
                    domain: cookie.domain,
                    maxAge: cookie.maxAge,
                    sameSite: (cookie.sameSite as 'lax' | 'strict' | 'none' | boolean | undefined),
                    expires: cookie.expires,
                    secure: cookie.secure,
                    httpOnly: cookie.httpOnly,
                });
            }
        });
    }

    return response;
}

字符串
用法如下:

function post<T>(path: string, body: object, _headers?: Record<string, string>, proxyCookies: boolean = false) {
    console.debug(`[API Request] POST ${path}`);

    return fetch(requestUrl(path), {
            method: 'POST',
            credentials: 'include',
            headers: { ..._headers, 'Content-Type': 'application/json' },
            body: JSON.stringify(body)
        })
        .then(proxyServerCookies(['COOKIE_NAME'], response))
        .then(handleResponse<T>);
}

相关问题