具有转移状态的角度通用闪烁

Question

我在后端API中使用angular 7和nodejs express，在SEO透视图中使用angular Universal进行服务器端渲染 在SSR网站闪烁之后，我正在使用基于JWT令牌的身份验证，并在每个Http请求中发送令牌以检查令牌是否有效

为消除闪烁，我尝试了多种方法来避免闪烁

1. 使用传输状态来管理缓存并避免重复的https请求，它工作正常，但问题是我没有在服务器端调用时从本地存储获取令牌 因此它无法重新加载页面或进行强制刷新，并且仍然遇到小的闪烁问题，例如它先显示主页，然后在1秒后加载正确的内容
2. 普遍使用Angular幸福 https://github.com/hapinessjs/ng-universal-module 我还尝试了角度幸福度模块来避免闪烁，但是该库还使用了相同的TransferState和缓存概念，面临着相同的问题
3. 角度预引导 https://github.com/angular/preboot 通过有角度的预引导，我避免了80％的跳动问题，但是仍然，它首先显示主页，然后加载访问的页面，看起来很奇怪

Answer 1

您可以做的是像以前一样使用TransferState，但是使用cookie来存储JWT而不是localstorage。这样一来，当您使用通用角度时就可以访问Cookie。

我们使用ngx-cookie来处理客户端和服务器端的cookie。

这样，您应该在初始页面加载时以及在angular接管客户端时显示的内容完全相同