使用keycloak-angular实现登录守卫时isLoggedIn始终为false的问题

你遇到的核心问题是KeycloakAuthGuard执行时，Keycloak的认证状态还未完成初始化或同步，导致isLoggedIn()返回错误的false值，同时直接调用router.navigate不符合Angular守卫的规范，可能引发导航冲突。

修正后的守卫实现 #

import { Injectable } from '@angular/core';
import { UrlTree, Router } from '@angular/router';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';

@Injectable({
  providedIn: 'root'
})
export class LoginGuard extends KeycloakAuthGuard {
  constructor(protected override readonly router: Router, protected readonly keycloak: KeycloakService) {
    super(router, keycloak);
  }

  async isAccessAllowed(): Promise<boolean | UrlTree> {
    // 强制同步最新的认证状态，避免初始化延迟导致的状态不一致
    await this.keycloak.updateToken(0);
    
    // 直接访问Keycloak实例的authenticated属性，比isLoggedIn()更可靠
    const isLoggedIn = this.keycloak.getKeycloakInstance().authenticated;
    
    if (isLoggedIn) {
      // 返回UrlTree是Angular守卫的标准做法，确保路由导航逻辑一致
      return this.router.createUrlTree(['/']);
    }

    return true;
  }
}

关键修改点说明 #

1. 强制同步认证状态：
   调用updateToken(0)会立即检查令牌有效性并同步认证状态，解决了应用启动时Keycloak初始化未完成导致的状态滞后问题。

2. 直接使用实例的authenticated属性：
   keycloak.isLoggedIn()内部本质也是读取getKeycloakInstance().authenticated，直接访问该属性可以避免异步调用带来的状态不一致。

3. 返回UrlTree而非直接navigate：
   Angular守卫要求返回boolean或UrlTree，直接调用navigate会绕过守卫的路由控制逻辑，返回UrlTree能确保导航行为符合框架规范。

配套配置检查 #

确保你的AppModule中正确配置了Keycloak初始化，保证应用启动时完成认证状态检查：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: '你的Keycloak地址',
        realm: '你的Realm名称',
        clientId: '你的客户端ID'
      },
      initOptions: {
        onLoad: 'check-sso', // 启动时自动检查用户认证状态
        silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ]
})
export class AppModule {}

内容的提问来源于stack exchange，提问作者Emz