Я использую "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
};