使用angular-cli在Universal Rendering中使用cookie

Question

我使用angular-cli创建了一个角度应用程序，并通过遵循此处给出的步骤在其中进行通用渲染。 但有人提到，如果我正在进行通用渲染，我不能在我的应用程序中使用全局变量，如窗口和文档，如何在前端设置cookie以维护用户会话。 以前我使用JWT，但为此我需要在浏览器中设置cookie。

Answer 1

注意：以下所有信息仅在您使用Node with Express动态呈现（在请求命中服务器时）服务器上的Angular应用程序时才有效。 我没有考虑过预渲染。 我不知道如果你使用Express以外的框架，你会怎么做，比如Hapi或其他任何orher框架。 我只能猜测@nguniversal应该为那些人提供解决方案，但是没有考虑过。

话虽这么说 ，这就是我设法在我的应用程序中提供cookie的方式，当它呈现在服务器端时：

app.server.module.ts ：

// ...
import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';

@Injectable()
export class RequestCookies {
    constructor(@Inject(REQUEST) private request: Request) {}

    get cookies() {
        return !!this.request.headers.cookie ? this.request.headers.cookie : null;
    }
}

@NgModule({
    imports: [
        // ...
    ],
    providers: [
        CookieService,
        { provide: 'req', useClass: RequestCookies }
    ],
    bootstrap: [AppComponent]
})
export class AppServerModule {}

app.module.ts :(有些人可能称之为app.browser.module.ts ）

@NgModule({
    declarations: [
        // ...
    ],
    imports: [
        // ...
    ],
    providers: [
        CookieService,
        {
            provide: 'req',
            useValue: null
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

cookie.service.ts ：

import { Inject, Injectable } from '@angular/core';


@Injectable()
export class CookieService {
    private cookieStore = {};

    constructor(
        @Inject('req') private readonly req: any,
    ) {
        if (this.req !== null) {
            this.parseCookies(this.req.cookies);
        } else {
            this.parseCookies(document.cookie);
        }
    }

    public parseCookies(cookies) {
        this.cookieStore = {};
        if (!!cookies === false) { return; }
        let cookiesArr = cookies.split(';');
        for (const cookie of cookiesArr) {
            const cookieArr = cookie.split('=');
            this.cookieStore[cookieArr[0]] = cookieArr[1];
        }
    }

    get(key: string) {
        return !!this.cookieStore[key] ? this.cookieStore[key] : null;
    }
}

any.component.ts ：

// ...
constructor(
    private cookieService: CookieService
) {}

needMyCookie() {
    const userCookie = this.cookieService.get('user');
}

确保你> npm install express @nguniversal/express-engine

PS我开始看这个回购： https ： //github.com/angular/universal-starter/tree/master/cli用于服务器端渲染，我自己只做了cookie部分（不包括在那里）。 这个回购跟随你链接的普遍故事，但超越了。 如果您只是遵循通用故事，它会说：

目前尚不支持延迟加载

但是，如果您尝试使用我发布的链接，您会发现服务器上的延迟加载模块也是RENDERED ！ 我不知道密钥是什么，也许它与server.js文件中的代码和@nguniversal/module-map-ngfactory-loader

我试过它：CLI版本1.4.2和Angular版本： 4.4.1

这是我在浏览器中禁用javascript时得到的：

我的旋转木马项目间距是这样的，因为它们实际上缩放到90％。 我在onInit上的项目上有一个zoomIn动画。 在服务器渲染视图上，我将它们强制设置为90％，这样它们在第一次加载时就不会出现100％，然后在客户端启动后，将它们设置为90到100的动画。

此外，如果有人遇到这个答案，并注意到屏幕截图中的视口宽度的引用，在主导航链接下面的代码块中 - 如果他们想知道 - 这是我的WindowService ：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable()
export class WindowService {

    constructor(
        @Inject(PLATFORM_ID) private readonly platformId: any,
    ) {}

    get width() {
        if (isPlatformBrowser(this.platformId)) {
            return window.innerWidth;
        } else {
            return 'Not available server-side!';
            // return null;
        }
    }

}

只需将它添加到app.module.ts和app.server.module.ts的providers: []数组app.server.module.ts 。

这里需要注意的另一件事是我正在使用Node with Express 。 如果您正在使用其他框架，例如Hapi或其他任何框架，我不知道这样做。

Answer 2

我使用npm包ng2-cache取得了成功（我使用的是Angular 4，它运行得很好）。 我正在使用本地存储，所以我在我的模块提供程序数组中有这样的：

providers: [
    CacheService,
    {provide: CacheStorageAbstract, useClass: CacheLocalStorage},
    ...
]

另一种选择是使用isPlatformBrowser（）如图所示这里 。

最丑陋的选择是在try-catch语句中放置处理cookie的代码。 这样它将在浏览器上工作，并在服务器端被忽略。