具有转移状态的 Angular 通用 flickring

标签 angular angular-universal

我正在使用 Angular 7 和 nodejs express 作为后端 API,我正在使用 Angular Universal 进行服务器端渲染以实现 SEO 视角 SSR 网站闪烁后,我正在使用基于 JWT token 的身份验证并在每个 Http 请求中发送 token 以检查 token 是否有效

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

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

最佳答案

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

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

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

关于具有转移状态的 Angular 通用 flickring,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58497407/

相关文章:

Angular 8 - 应用 Multi-Tenancy

Angular 2+ 本地化 (i18n) rtl 支持

Angular 不是已知元素错误

angular - 如何在 Angular Universal 中获取完整的基本 URL(包括服务器、端口和协议(protocol))?

angular - 如何在 Angular Universal 中导入 Material Module 或 NgxBootstrap?

javascript - 使用具有 6 段的路径创建 SVG 圆

angular - 如何从 Web api Angular 6 获取数据

angular - 解析器如何与 SSR 和 Angular Universal 配合使用

angular - 具有 Angular 错误节点 InvocationException : The Node invocation timed out after 60000ms 的 asp 网络核心

angular - 添加静态预渲染到 ng add @nguniversal/express-engine