Когда вызывается моя защита аутентификации, она на короткое время отображает страницу входа при перезагрузке страницы по маршруту с canActivate - Angular v17

Проблема связана с включением SSR, поскольку на сервере нет window или localStorage. Страница входа генерируется на сервере и отправляется во внешний интерфейс. Непосредственно перед повторным запуском пользовательского интерфейса (думаю, гидратация!) Мы видим вспышку страницы входа в систему.

Чтобы решить эту проблему, все, что вам нужно сделать, это сделать так, чтобы страница входа в систему ничего не показывала, когда она создается на сервере, и тогда создается впечатление, что приложение загружается. В качестве альтернативы вы также можете показать заставку с загрузчиком на странице входа в систему, когда режим сервера, это избавит от этой ошибки.

ТС:

...
export class LoginComponent {
  isUser = signal(false)
  isServer = false;
  
  constructor(private auth: AuthService, private router: Router, private tokenService: TokenService, 
    @Inject(PLATFORM_ID) platformId: Object){
      this.isServer = isPlatformServer(platformId);
    console.info('aqui')
    const userToken = this.tokenService.getToken()
    if (userToken){
      this.isUser.set(true)
    }
  }
  ...

HTML:

@if (!this.isUser() && !isServer) {
    <p>login works!</p>
<button mat-raised-button (click) = "login()"> LOGIN </button>
}

Репозиторий GitHub

Пример спиннера

HTML

@if (isServer) {
    <div style = "height:100vh;width:100vw;background-color: rgb(194, 24, 91); display: flex; align-items: center; justify-content: center;">
        <div id = "loading"></div>
    </div>
} @else {
    @if (!this.isUser()) {
        <p>login works!</p>
    <button mat-raised-button (click) = "login()"> LOGIN </button>
    }
}

CSS

#loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}

ТС:

export class LoginComponent {
  isServer = false;
  isUser = signal(false)

  constructor(
    private auth: AuthService, 
    private router: Router, 
    private tokenService: TokenService,
    @Inject(PLATFORM_ID) platformId: Object){
      this.isServer = isPlatformServer(platformId);
    console.info('aqui')
    const userToken = this.tokenService.getToken()
    if (userToken){
      this.isUser.set(true)
    }
  }

Репозиторий GitHub