Угловое универсальное мерцание с Передаточным состоянием - PullRequest
3 голосов
/ 22 октября 2019

Я использую Angular 7 и Nodejs Express для Backend API, я использую Angular Universal для серверного рендеринга для перспективы SEO. После того, как сайт SSR мигает, я использую аутентификацию на основе токенов JWT и отправляю токен в каждом запросе Http дляпроверить токен действительным или нет

Для удаления мерцания, я пробовал несколько способов, чтобы избежать мерцания

  1. Использование состояния передачи для управления кэшированием и избежать дублирования запроса https, он работает отлично, нопроблема в том, что я не получаю токен из локального хранилища при вызове на стороне сервера, поэтому он не работает, не перезагружая страницу или не обновляя ее, и все же я столкнулся с небольшой мерцающей проблемой, как будто сначала отображается домашняя страница, а затем через 1 секунду загружается правильный контент
  2. Использование универсального углового счастья https://github.com/hapinessjs/ng-universal-module Я также пробовал модули углового счастья, чтобы избежать мерцания, но в этой библиотеке также использовалась та же концепция TransferState и кеширования, сталкивающаяся с той же проблемой
  3. AngularPreboothttps://github.com/angular/preboot При угловой предварительной загрузке я избегаю проблемы мерцания на 80%, но все равно сначала отображается домашняя страница, а затем загружается посещенная страница, это выглядит странно

1 Ответ

1 голос
/ 23 октября 2019

То, что вы можете сделать, это использовать TransferState, как вы уже делаете, но использовать куки для хранения JWT вместо localalstorage. Таким образом, у вас будет доступ к файлам cookie при использовании angular universal.

Мы использовали ngx-cookie для обработки файлов cookie как на стороне клиента, так и на стороне сервера.

Таким образом, вы должны иметь точно такой же контент, который отображается при начальной загрузке страницы, и когда angular переходит на сторону клиента

...