keycloak logout
MODIFY
src/app/pas-header/pas-header.component.html
src/app/pas-header/pas-header.component.html
<div class="rightMenu">
<mat-icon id="header-icon">desktop_windows</mat-icon>
<div id="app-header">API Developer Portal</div>
+ <div><mat-icon id="logout" (click)="logout()">power_settings_new</mat-icon></div>
</div>
</nav>

MODIFY
src/app/pas-header/pas-header.component.scss
src/app/pas-header/pas-header.component.scss
@@ -14,10 +14,6 @@ nav {
width: 100%;
}
-#header-icon {
- padding-right: 5px;
-}
-
.logo {
height: 20px;
width: 170px;
@@ -25,9 +21,21 @@ nav {
.rightMenu {
float: right;
+ width: 210px;
+}
+
+#header-icon {
+ float: left;
+ padding-right: 5px;
}
#app-header {
- float:right;
+ float: left;
margin-top: 3px;
}
+
+#logout {
+ float: right;
+ cursor: pointer;
+ color: darkred;
+}

MODIFY
src/app/pas-header/pas-header.component.ts
src/app/pas-header/pas-header.component.ts
import { Component, OnInit } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
@Component({
selector: 'app-pas-header',
@@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core';
})
export class PasHeaderComponent implements OnInit {
- constructor() { }
+ constructor(private keycloak: KeycloakService) { }
ngOnInit() {
}
+ public logout() {
+ localStorage.setItem('apiman_keycloak_token', '');
+ localStorage.setItem('apiman_keycloak_refresh_token', '');
+ this.keycloak.getKeycloakInstance().logout();
+ }
+
}

keycloak logout