Question

成功将keycloak与angular集成后，将接收令牌并返回配置文件数据。但是，“某些” javascript功能不起作用。控制台中没有错误，网络信息似乎很好。如果我想从AppModule中删除提供者信息，则页面加载正常，但是一旦调用了密钥斗篷，页面上的切换功能将无法正常工作或加载程序将无限期加载。如果我注释掉加载程序，则会显示该页面，但切换菜单等功能将不起作用。我不确定将keycloak与angular集成时是否有人遇到此问题，并且可以指导我解决该问题。

AppModule

@NgModule({
 declarations: [
   AppComponent
       ],
   imports: [
    BrowserModule,
    KeycloakAngularModule
    ],
    providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializer,
      multi: true,
      deps: [KeycloakService]
   } 
 ],
   bootstrap: [AppComponent]
})
export class AppModule { }

初始化器功能

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

             keycloak.init({
                config: environment.keycloak,
                initOptions: {
                    onLoad: 'login-required',
                    checkLoginIframe: false
                }
            }).catch((e) => {
                console.log("Error thrown in init "+e)
            });

HTML-我将app-side-mini-toggler的href更改为routerLink。如果不是这样，单击将仅重定向到localhost：4200 /＃，而不是切换

<div class="col-xl-5 col-lg-5 col-md-5 col-sm-3 col-4">
 <a class="mini-nav-btn" routerLink="#" id="app-side-mini-toggler">
                    <i class="icon-menu5"></i>
  </a>
  <a href="#app-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded="true">
    <i class="icon-chevron-thin-left"></i>
  </a>
</div>

With Loader, Page loads infinitely

Without Loader Page loads with user information but menu toggle does not work

Answer 1

Keycloak可能覆盖了某些Javascript函数，具有某些依赖项或仅在特定版本的Angular中工作。

也许这个库可能对您有用：https://github.com/mauriciovigolo/keycloak-angular

Angular 6 + keycloak 4，Javascript库无法加载

1 个答案: