密钥披风和角-无法读取未定义的属性“resourceAccess”

Question

我有棱角的应用程序，我试着添加钥匙斗篷。我设置了keycloak，但是当我尝试运行角应用程序时，我得到了ERROR Error: Uncaught (in promise): An error happened during access validation. Details:TypeError: Cannot read property 'resourceAccess' of undefined。

角版本: 8.2.5密钥披风-角度: 7.0.1键盘-js: 7.0.0

这是我的auth.guard.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);
      }
    });
  }
}

这是我的environment.ts

import { KeycloakConfig } from "keycloak-angular";

let keycloakConfig: KeycloakConfig = {
  realm: "realm5",
  url: "https://aaaaaa.net/auth",
  clientId: "admin"
};
export const environment = {
  production: false,
  keycloak: keycloakConfig
};

在app-routing.module.ts中，我导入AppAuthGuard

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AppAuthGuard } from "./auth/auth.guard";
import { HomeComponent } from "./home/home.component";
import { UsersComponent } from "./users/users.component";

const routes: Routes = [
{ path: "admin-app/home", component: HomeComponent, canActivate: 
[AppAuthGuard] },
{ path: "admin-app/users", component: UsersComponent, canActivate: 
[AppAuthGuard] },
{ path: "admin-app", redirectTo: "admin-app/home", canActivate: 
[AppAuthGuard] }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AppAuthGuard]
})
export class AppRoutingModule {}

在app.module.ts中

    import { KeycloakAngularModule, KeycloakService } from "keycloak-angular";
    const keycloakService = new KeycloakService();
    @NgModule({
      declarations: [AppComponent, HomeComponent, UsersComponent, NavComponent],
      imports: [BrowserModule, AppRoutingModule, KeycloakAngularModule],
      providers: [{
         provide: KeycloakService,
         useValue: keycloakService
      }],
     bootstrap: [AppComponent]
    })
   export class AppModule {ngDoBootstrap(app) {
     keycloakService
  .init()
  .then(() => {
    console.log("[ngDoBootstrap] bootstrap app");

    app.bootstrap(AppComponent);
  })
  .catch(error => console.error("[ngDoBootstrap] init Keycloak failed", error));

}}

Answer 1

您正在手动引导角应用程序，因此您必须：

• 从NgModule定义中删除引导程序:数组。
• 将entryComponents: AppComponent添加到NgModule定义中。然后keycloak方法将在需要之前在AuthGuard.

中实际执行。

   @NgModule({
     declarations: [AppComponent, HomeComponent, UsersComponent, NavComponent],
     imports: [BrowserModule, AppRoutingModule, KeycloakAngularModule],
     providers: [{
        provide: KeycloakService,
        useValue: keycloakService
     }],
    entryComponents: [AppComponent]
   })

Answer 2

实际上，keycloak 7.0.0中有一个bug。

当您使用keycloak 7.0.1 (现在可用)时，它可以工作。我不太确定。如果你也需要改变，菲德尔冈佐提供，但我有同样的问题，你。

https://github.com/mauriciovigolo/keycloak-angular/issues/153