Question

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

使用Keycloak登录后，它将被重定向回目标网页。然后，着陆页[ app.component.html ]将使用 allowAccess（）检查有效令牌是否显示主导航或 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 时如何处理它。您可以从此处查看更多详细信息：Tokens are not set immediately after redirect #221。

在验证访问令牌角度oauth2 oidc

1 个答案: