在验证访问令牌角度 oauth2 oidc 时添加加载页面

Question

我有一个使用 angular-oauth2-oidc 和 Keycloak OIDC 隐式流的角度页面。

使用 Keycloak 登录后，它将被重定向回登录页面。 然后，登陆页面 [app.component.html] 将使用 allowAccess() 检查有效令牌以显示 ma​​in-nav 或 app-cover 相应地。

据我了解因为这个验证需要一点时间，所以在检查这些token的时候，登陆页面会先显示app-cover，然后快速切换到ma​​in-nav。

这种行为似乎提供了糟糕的用户体验，因为登录页面在重定向到 ma​​in-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 时如何处理它。您可以从这里查看更多详细信息：Tokens are not set immediately after redirect #221。