Keycloak- angular (keycloak. js) возвращает "Не удается прочитать свойство 'resourceAccess' из неопределенного" - PullRequest
0 голосов
/ 23 февраля 2020

Я использую "keycloak- angular": "^ 7.1.0" и "keycloak- js": "^ 9.0.0". Кажется, что инициализация идет нормально. Всякий раз, когда я перехожу на защищенный URL-адрес, angular перенаправляет меня на Keycloak, я могу войти в систему и видеть cookie-файлы с токенами.

Однако возникает проблема, когда я вызываю любой из методов KeycloakService, которые он возвращает ошибка: «Не удается прочитать свойство» (здесь имя метода) «неопределено».

Что я здесь не так делаю? Вот мои классы:

Модуль приложения:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, DoBootstrap, ApplicationRef } from '@angular/core';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import {ReactiveFormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AuthGuard } from './services/kecloak/auth.guard';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { environment } from 'src/environments/environment';
import { KeycloakInitService } from './services/kecloak/keycloak.init';

const keycloakService = new KeycloakService();

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    NoopAnimationsModule,
    KeycloakAngularModule
  ],
  providers: [
    ...
    AuthenticationService,
    {
      provide:HTTP_INTERCEPTORS,
      useClass:AuthenticationInterceptor,
      multi:true
    },
    AuthGuard,
    {
      provide: KeycloakService,
      useValue: keycloakService
    }
  ],
  bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})

export class AppModule implements DoBootstrap {
  ngDoBootstrap(appRef: ApplicationRef) {
    console.info(keycloakService + "initiated")
    keycloakService
      .init({
        config: environment.keycloak,
        initOptions: {
          checkLoginIframe: false
        },
        bearerExcludedUrls: []
      })
      .then(() => {
        console.log('[ngDoBootstrap] bootstrap app');

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

Компонент Navbar:

import { Component, OnInit, OnChanges, SimpleChanges, Input, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public loggedIn:boolean;
  public signInText:string;
  private roles:string[];
  private router:Router;
  private keycloak:KeycloakService;

  @Input() isAdmin:boolean=false;
  constructor( router:Router, keycloak: KeycloakService) { 
    this.router=router;
    this.keycloak = keycloak;
  }

  async ngOnInit() {
    console.info(this.keycloak)
    this.keycloak.isLoggedIn().then(data=>{
      this.loggedIn=data;
      if(this.loggedIn){this.statusLogedIn();}
      else{this.statusLogedOut();}
    });

    if(this.keycloak.isLoggedIn){
    this.statusLogedIn(); 
    }
    else {
    this.statusLogedOut();
    }
  }

  public login() {
    console.info(this.keycloak)
    if(!this.loggedIn){
      this.keycloak.login();
    }
    else{
      this.keycloak.logout();
      this.keycloak.clearToken();
      this.statusLogedOut();
    }
  }


  statusLogedIn(){
   this.roles = this.keycloak.getUserRoles(true);
    this.loggedIn=true;
    this.signInText='Log out';
  }
  statusLogedOut(){
    this.loggedIn=false;
      this.signInText='Sign In';

  }
}

Конфигурация:


import { KeycloakConfig } from 'keycloak-angular';

// Add here your keycloak setup infos
const keycloakConfig: KeycloakConfig = {
  url: 'http://localhost:8080/auth/',
  realm: 'master',
  clientId: 'angular-client'
};

export const environment = {
  production: false,
  ...
  keycloak: keycloakConfig
};

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...