Question

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

Answer 1

注意：以下所有信息仅在您使用 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

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

尚不支持延迟加载

但是，如果您尝试使用我发布的回购链接，您会发现服务器上的延迟加载模块已经变为了！我不知道密钥是什么，也许它与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;
        }
    }

}

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

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

Answer 2

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

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

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

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

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

2 个答案: