这通常是因为在页面刷新时 Keycloak 令牌丢失导致的。你可以通过 Keycloak Service 的 init() 方法再次获取令牌。你可以在 AppComponent 中添加以下代码:
import { Component, OnInit } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
@Component({
selector: 'app-root',
template: ' '
})
export class AppComponent implements OnInit {
constructor(private keycloakService: KeycloakService) {}
ngOnInit() {
this.keycloakService.init({ onLoad: 'login-required' })
.then(() => console.log('Keycloak init'))
.catch(() => console.log('Keycloak init failed'));
}
}
这段代码将初始化 Keycloak 并创建一个新的 Token。加上 onLoad: 'login-required' 可以让 Keycloak 每次刷新页面时都需要重新登录。
然而,如果你的 Angular 应用程序有子组件,那么仍需要在 loadChildren 中初始化 Keycloak。在应用程序路由中,你可以为每个带有 lazy-loaded 子路由的路由添加 canLoad 守卫:
import { Injectable } from '@angular/core';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
import { ActivatedRouteSnapshot, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {
constructor(private keycloakAuthGuard: KeycloakAuthGuard, private keycloakService: KeycloakService, private router: Router) {}
async canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise {
const auth = await this.keycloakAuthGuard.canActivateChild(route, state);
if (auth) { return true; }
try {
await this.keycloakService.getToken();
return await this.keycloakAuthGuard.canActivateChild(route, state);
} catch {
this.keycloakService.login({ redirectUri: window.location.href });
return false;
}
}