我正在使用 Angular 7 和 nodejs express 作为后端 API,我正在使用 Angular Universal 进行服务器端渲染以实现 SEO 视角 SSR 网站闪烁后,我正在使用基于 JWT token 的身份验证并在每个 Http 请求中发送 token 以检查 token 是否有效
为了消除闪烁,我尝试了多种方法来避免闪烁
- 使用传输状态来管理缓存并避免重复的 https 请求,它工作得很好,但问题是我没有在服务器端调用时从本地存储获取 token 所以它无法重新加载页面或硬刷新,但我仍然面临小的闪烁问题,比如它先显示主页,然后在 1 秒后加载正确的内容
- 使用 Angular happiness universal https://github.com/hapinessjs/ng-universal-module 我也尝试过 Angular 快乐模块来避免闪烁,但是这个库也使用了相同的TransferState和缓存概念,面临同样的问题
- 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/