Angular 带有转移状态的通用闪烁

Question

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

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

1. 使用传输状态来管理缓存并避免重复的 https 请求，它工作得很好，但问题是我在服务器端调用时没有从本地存储获取令牌 所以它无法重新加载页面或硬刷新，但我仍然面临小的闪烁问题，比如它首先显示主页，然后在 1 秒后加载正确的内容
2. 使用Angular幸福万能 https://github.com/hapinessjs/ng-universal-module 我也尝试过angular快乐模块来避免闪烁，但是这个库也使用了相同的TransferState和缓存概念，面临同样的问题
3. Angular 预引导 https://github.com/angular/preboot 使用 angular 预启动，我避免了 80% 的闪烁问题，但它仍然先显示主页，然后加载访问的页面，看起来很奇怪

Answer 1

您可以像以前一样使用 TransferState，但使用 cookie 来存储 JWT 而不是 localstorage。这样您就可以在使用 angular universal 时访问您的 cookie。

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

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

Answer 2

RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' }),