使用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;
        }
    }

}

只需将它添加到providers: []两个阵列app.module.ts和app.server.module.ts.

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

Answer 2

我已经成功使用 npm 包ng2-cache（我使用的是 Angular 4，它工作得很好）。我正在使用本地存储，因此我将其放在我的模块提供程序数组中，如下所示：

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

另一种选择是使用 isPlatformBrowser()，如下所示。

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