Angular 上的 Keycloak - 在加载时没有获得正确的状态

如何解决Angular 上的 Keycloak - 在加载时没有获得正确的状态

使用最新的 angular (11)、最新的 keycloak-angular 和 keycloak-js。

在页面加载时，当我初始化 keycloak 时，我想获得登录状态。即使会话处于活动状态，我也总是出错。

这是我的初始化代码：

import { KeycloakService } from 'keycloak-angular';
import { AppService } from 'src/app/app.service';
import { environment } from '../environments/environment';
 
export function initializer(keycloak: KeycloakService,appService: AppService): () => Promise<any> {
    return (): Promise<any> => {
        return new Promise<void>(async (resolve,reject) => {
          try {
            await keycloak.init({
                config: {
                    url: environment.keycloak.issuer,realm: environment.keycloak.realm,clientId: environment.keycloak.clientId
                },loadUserProfileAtStartUp: true,initOptions: {
                checkLoginIframe: true
              },bearerExcludedUrls: []
            }).then((a) => {
              console.log(a); // this returns always false
            });
            resolve();
          } catch (error) {
            reject(error);
          }
        });
      };
}

即使在以下情况下也会返回 false：

解决方法

我会说它首先需要带有 pkce 流程的授权代码，因为它是 SPA（当然使用的 OIDC 客户端必须是公开的）：

initOptions: {
  onLoad: 'login-required',checkLoginIframe: false,pkceMethod: 'S256'
},

async/await 语法也可能是个问题（但 Angular/JS 不是我的菜，所以我可能是错的）。我会把它改写为：

keycloak.init(
  ...
).then(async authenticated => {
  if (!authenticated) {
    // unauthenticated
    console.log(a)
    window.location.reload()
    return
  } else {
    // authenticated
    console.log(a)
    ...
  }

,

请试试这个初始化方法：

export function initializer(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> => {
  return new Promise(async (resolve,reject) => {
    try {
      await keycloak.init({
        config: {
                url: environment.keycloak.issuer,realm: environment.keycloak.realm,clientId: environment.keycloak.clientId
            },initOptions: {
          onLoad: 'check-sso',checkLoginIframe: false
        },enableBearerInterceptor: true,bearerPrefix: 'Bearer',bearerExcludedUrls: [
          'main.js',]
      });
      resolve();
    } catch (error) {
      reject(error);
    }
  }
    )
    .catch((e) => {
      console.log('Error thrown in init ' + e);
    });
};
}

,

正如我在评论中所写，我发现我必须拥有 onLoad 属性。 我不想有 onLoad: 'login-required'，因为大多数页面不需要用户登录，所以我不得不添加 onLoad: 'check-sso'。