Добавить страницу загрузки при проверке токена доступа angular oauth2 oidc

Question

У меня есть угловая страница, использующая angular-oauth2-oidc с неявным потоком ключей Keycloak OIDC.

После входа в Keycloak он будет перенаправлен обратно на целевую страницу. Затем целевая страница [app.component.html] проверит с помощью allowAccess() допустимые токены для отображения main-nav или app-cover соответственно.

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

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

Или как лучше переключать ч / б компоненты?

Спасибо

[App.component.html]

<main-nav *ngIf="allowAccess">
  <router-outlet></router-outlet>
</main-nav>

<app-cover *ngIf="!allowAccess"></app-cover>

[app.component.ts]

import { OAuthService, JwksValidationHandler} from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';
import { Component } from '@angular/core';
export * from './auth/auth.guard.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {
    this.configureWithNewConfigApi();
  }

  private configureWithNewConfigApi() {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  public get allowAccess() {
    return this.oauthService.hasValidAccessToken();
  }
}

[модуль маршрутизации]

RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'notification', component: NotificationComponent, canActivate: [AuthGuard] },
      { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },
    ]),

Answer 1

У меня была такая же проблема, и я много искал решение, но не нашел. Итак, мне пришлось придумать, как решить эту проблему самостоятельно, чтобы обеспечить хороший UX.

Когда пользователь нажмет кнопку входа в ваше приложение, он будет перенаправлен на страницу Keycloak SSO. После аутентификации они будут перенаправлены обратно в ваше приложение. Когда Keycloak перенаправляет пользователя в приложение, он предоставляет некоторые параметры запроса с URL-адресом.

https://your_redirect_url?state=...&session_state=...&code=...

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

      <app-overlay *ngIf="!didLoginComplete()"></app-overlay>

      @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor(private activatedRoute: ActivatedRoute, private authService: AuthService) { }
  
  didLoginComplete() {
    let completed = true;
    this.activatedRoute.queryParams.subscribe(params => {
      if (params['code'] && !this.authService.isLoggedIn()) {
        completed = false;
      }
    })
    return completed;
  }

      import { Injectable } from '@angular/core';
import { AuthConfig, NullValidationHandler, OAuthService } from 'angular-oauth2-oidc';
import { environment } from 'src/environments/environment';
import { filter } from 'rxjs/operators';
import { env } from 'process';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(public oauthService: OAuthService) {
    this.configure();
  }

  private configure() {
    this.oauthService.configure(environment.authConfig);
    this.oauthService.setupAutomaticSilentRefresh();
    this.oauthService.setStorage(localStorage);
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  public isLoggedIn() {
    return this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken();
  }
}

Я также нашел проблему на GitHub в репозитории angular-oauth2-oidc, но обсуждение касается того, как с ней справиться, когда вы используете Auth Guards. Вы можете проверить это здесь для более подробной информации: Токены не устанавливаются сразу после перенаправления #221.