在驗證訪問令牌 angular oauth2 oidc 時添加加載頁面

Question

我有一個使用 angular-oauth2-oidc 和 Keycloak OIDC 隱式流的角度頁面。

使用 Keycloak 登錄后，它將被重定向回登錄頁面。 然后，登陸頁面 [ app.component.html ] 將使用allowAccess()檢查有效令牌以相應地顯示main-nav或app-cover 。

根據我的理解，因為這個驗證需要很少的時間，所以在檢查這些令牌時，登錄頁面會首先顯示app-cover ，然后快速更改為main-nav 。

這種行為似乎提供了糟糕的用戶體驗，因為登錄頁面在重定向到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

我遇到了同樣的問題，我搜索了很多解決方案，但沒有找到任何解決方案。 所以，我必須想辦法自己解決這個問題，才能提供一個好的用戶體驗。

當用戶在您的應用程序中按下登錄時，他們將被重定向到 Keycloak SSO 頁面。 身份驗證后，它們將被重定向回您的應用程序。 當 Keycloak 將用戶重定向到應用程序時，它會提供一些帶有 URL 的查詢參數。

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

這些查詢參數僅在用戶從 SSO 頁面重定向時提供。 發生這種情況時，我會檢查AppComponent是否存在這些查詢參數之一以及用戶是否尚未登錄。 如果他們沒有登錄，我會在頁面上顯示一個帶有微調器的覆蓋圖，直到令牌成功加載。

<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 后不會立即設置令牌。