我有一个使用 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] },
]),