具有传输状态的角通用闪烁

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. 角度预引导 https://github.com/angular/preboot 使用角度预启动，我避免了 80% 的闪烁问题，但它仍然先显示主页，然后加载访问过的页面，看起来很奇怪

Answer 1

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

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

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