Angular Universal在请求标头中设置set-cookies

Question

我有带有身份验证的角度通用 SSR 应用程序。我将身份验证令牌保存在 http cookies(set-cookies) 中。现在，当我刷新应用程序时，我首先看到未经身份验证的页面，一秒钟后它会转换为经过身份验证的状态。

我知道发生这种情况是因为 Universals 渲染器服务器在渲染页面时不会将令牌从 cookie 传递到 API。那么如何强制通用服务器以经过身份验证的状态呈现页面呢？

Answer 1

Angular Universal在使用时不传输cookie HttpClient（github问题）。您可以使用拦截器手动添加它们。

拦截器.ts

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

@Injectable()
export class CookieInterceptor implements HttpInterceptor {
  constructor(@Optional() @Inject(REQUEST) private httpRequest) 
  {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    if (this.httpRequest) //If optional request is provided, we are server side
    {
      req = req.clone(
      { 
        setHeaders: 
        {
            Cookie: this.httpRequest.headers.cookie
        }
      });
    }
    return next.handle(req);
  }
}

您可能会收到以下错误

拒绝设置不安全标头“Cookie”

此评论中建议的一个可能的解决方法是绕过 xhr2 对不安全标头的默认安全行为

对于角度 7（我猜是 8），以下工作

服务器.ts

import * as xhr2 from 'xhr2';
xhr2.prototype._restrictedHeaders = {};

我还没有测试 Angular 9，但我认为您需要针对不安全的 Cookie 标头采取不同的解决方法

// activate cookie for server-side rendering
export class ServerXhr implements XhrFactory {
  build(): XMLHttpRequest {
    xhr2.prototype._restrictedHeaders.cookie = false;
    return new xhr2.XMLHttpRequest();
  }
}

@NgModule({
  ...
  providers: [{ provide: XhrFactory, useClass: ServerXhr }],
  ...
})
export class AppServerModule {}