Using cookie during SSR #267

New Issue

fergalmoran · 2025-08-09T17:15:38Z

fergalmoran commented

2025-08-09 17:15:38 +00:00

Originally created by @svoychik on 12/13/2017

I need ssr for an authorized user. So I store token in a cookie and send it in the HTTP request.
I made a solution based on the javaScriptService template using ngx-cookie, but it looks not scalable, restricted and a little weird.
So, my changes:

boot.server.ts:

.....
export function convertDictToString(cookieDict: Array<{key:string, value:string}>) : string {
    let cookieString: string = '';
    for (let cookie of cookieDict) {
        cookieString += `${cookie.key}=${cookie.value}; `;
    }
    return cookieString;
  }

export function getRequest(params: any) {
    const { cookie = [] as Array<{key:string, value:string}> } = { cookie: params.data.cookies };
    const cookieString: string = convertDictToString(cookie);
    const req: any = {
        'headers': {
            'cookie': cookieString
        }
    };
    return req;
  }

  export function getResponse(params: any) {
    const { cookie = [] as Array<{key:string, value:string}> } = { cookie: params.data.cookies };
    const cookieString: string = convertDictToString(cookie);
    const res: any = {
        'headers': {
            'cookie': cookieString
        }
    };
    return res;
  }
export default createServerRenderer(params => {
    const req = getRequest(params);
    const res = getResponse(params);
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
        { provide: 'REQUEST', useValue: req },
        { provide: 'RESPONSE', useValue: res }
    ];
....

Index.cshtml

<app 
    asp-prerender-module="ClientApp/dist/main-server"
    asp-prerender-data="new {
       Cookies = ViewContext.HttpContext.Request.Cookies
       }"
>Loading...</app>

app.server.module.ts

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        ServerModule,
        AppModuleShared
    ],
    providers: [{ provide: CookieService, useClass: CookieBackendService }]  <-- Change
})
export class AppModule {
}

app.shared.module.ts
Added CookieModule.forRoot() to imports

Maybe there is a better solution to pass a cookie to the server during SSR?

Full code of my solution:
https://github.com/svoychik/dotNetCoreNgxCookieExample

*Originally created by @svoychik on 12/13/2017* I need ssr for an authorized user. So I store token in a cookie and send it in the HTTP request. I made a solution based on the javaScriptService template using ngx-cookie, but it looks not scalable, restricted and a little weird. So, my changes: - boot.server.ts: ``` ..... export function convertDictToString(cookieDict: Array<{key:string, value:string}>) : string { let cookieString: string = ''; for (let cookie of cookieDict) { cookieString += `${cookie.key}=${cookie.value}; `; } return cookieString; } export function getRequest(params: any) { const { cookie = [] as Array<{key:string, value:string}> } = { cookie: params.data.cookies }; const cookieString: string = convertDictToString(cookie); const req: any = { 'headers': { 'cookie': cookieString } }; return req; } export function getResponse(params: any) { const { cookie = [] as Array<{key:string, value:string}> } = { cookie: params.data.cookies }; const cookieString: string = convertDictToString(cookie); const res: any = { 'headers': { 'cookie': cookieString } }; return res; } export default createServerRenderer(params => { const req = getRequest(params); const res = getResponse(params); const providers = [ { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } }, { provide: APP_BASE_HREF, useValue: params.baseUrl }, { provide: 'BASE_URL', useValue: params.origin + params.baseUrl }, { provide: 'REQUEST', useValue: req }, { provide: 'RESPONSE', useValue: res } ]; .... ``` - Index.cshtml ``` <app asp-prerender-module="ClientApp/dist/main-server" asp-prerender-data="new { Cookies = ViewContext.HttpContext.Request.Cookies }" >Loading...</app> ``` - app.server.module.ts ``` @NgModule({ bootstrap: [ AppComponent ], imports: [ ServerModule, AppModuleShared ], providers: [{ provide: CookieService, useClass: CookieBackendService }] <-- Change }) export class AppModule { } ``` - app.shared.module.ts Added `CookieModule.forRoot()` to imports Maybe there is a better solution to pass a cookie to the server during SSR? Full code of my solution: https://github.com/svoychik/dotNetCoreNgxCookieExample

fergalmoran closed this issue

2025-08-09 17:15:38 +00:00

fergalmoran referenced this issue

2025-08-09 17:20:06 +00:00

KnockoutSpa (router.ts) - Left-hand side of assignment expression cannot be a constant or a read-only property. #1430

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#267