带钥匙罩的角度5-角度结束错误

Question

在https://github.com/mauriciovigolo/keycloak-angular的帮助下，我正在尝试将我的angular 5应用程序连接到keycloak服务器。

但是当我访问网站时，我得到了以下错误。

ERROR An error happened during Keycloak initialization. core.js:1449
defaultErrorLogger core.js:1449
ErrorHandler.prototype.handleError core.js:1510
_callAndReportToErrorHandler/</< core.js:5693:54
ZoneDelegate.prototype.invoke zone.js:392
Zone.prototype.run zone.js:142
NgZone.prototype.runOutsideAngular core.js:4708:47
_callAndReportToErrorHandler/< core.js:5693
ZoneDelegate.prototype.invoke zone.js:392
onInvoke core.js:4760
ZoneDelegate.prototype.invoke zone.js:391
Zone.prototype.run zone.js:142
scheduleResolveOrReject/< zone.js:873
ZoneDelegate.prototype.invokeTask zone.js:425
onInvokeTask core.js:4751
ZoneDelegate.prototype.invokeTask zone.js:424
Zone.prototype.runTask zone.js:192
drainMicroTaskQueue zone.js:602
ZoneTask.invokeTask zone.js:503
invokeTask zone.js:1540
globalZoneAwareCallback zone.js:1566


Unhandled Promise rejection: An error happened during Keycloak initialization. ; Zone: <root> ; Task: Promise.then ; Value: An error happened during Keycloak initialization. undefined zone.js:690
api.onUnhandledError zone.js:690
handleUnhandledRejection zone.js:717
_loop_1 zone.js:707
api.microtaskDrainDone zone.js:711
drainMicroTaskQueue zone.js:610
ZoneTask.invokeTask zone.js:503
invokeTask zone.js:1540
globalZoneAwareCallback zone.js:1566

那是我的environment.ts

import { KeycloakConfig } from 'keycloak-angular';
const keycloakConfig: KeycloakConfig = {
  url: 'https://devel.localhost:8443/auth',
  realm: 'MAP',
  clientId: 'webapp'
}
export const environment = {
  production: false,
  keycloak: keycloakConfig
};

那是我的app.authguard.ts

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

@Injectable()
export class AppAuthGuard extends KeycloakAuthGuard {

constructor(protected router: Router, protected keycloakAngular: KeycloakService) {
    super(router, keycloakAngular);
}

isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return new Promise(async (resolve, reject) => {
        if (!this.authenticated) {
            this.keycloakAngular.login();
            return;
        }

        const requiredRoles = route.data.roles;
        if (!requiredRoles || requiredRoles.length === 0) {
            return resolve(true);
        } else {
            if (!this.roles || this.roles.length === 0 ) {
                resolve(false);
            }
            let granted: boolean = false;
            for (const requiredRole  of requiredRoles) {
                if (this.roles.indexOf(requiredRole) > -1) {
                    granted = true;
                    break;
                }
            }
            resolve(granted);
        }
    });
}
}

最后是我的app.init.ts

import { KeycloakService } from 'keycloak-angular';

export function initializer(keycloak: KeycloakService): () => Promise<any> {

return (): Promise<any> => {
    return new Promise(async (resolve, reject) => {
        try {
            await keycloak.init();
            resolve();
        } catch (error) {
            reject(error);
        }
    });
};

}

我找不到我的设置中的错误之处。我遵循了库的github页面上提供的解释。

Answer 1

看起来keycloak-js没有找到你的配置。在你的初始化器函数中没有配置参数。如果您在应用程序的根目录下创建一个如keycloak-js adapter docs中所示的keycloak.json配置文件，它将完美工作。

如果不想创建keycloak.json文件，则必须将环境文件中的值传递给KeycloakService的init方法，如keycloak-heroes example中所示。

例如：

import { KeycloakService } from 'keycloak-angular';

import { environment } from '../../environments/environment';

export function initializer(keycloak: KeycloakService): () => Promise<any> {
  return (): Promise<any> => {
    return new Promise(async (resolve, reject) => {
      try {
        await keycloak.init({
          config: environment.keycloak,
          initOptions: {
            onLoad: 'login-required',
            checkLoginIframe: false
          },
          bearerExcludedUrls: []
        });
        resolve();
      } catch (error) {
        reject(error);
      }
    });
  };
}

如果您有任何其他问题，库中还提供了一个slack channel。

谢谢!