Autentifikácia v Ionic (ver.5) aplikácii cez REST API (4.časť) - odhlásenie

V sú informácie o tom, aké sú REST API volania a čo (v prípade úspechu) vracajú.
V je postup ako vytvoriť funkcionalitu "Registrácia"v Ionic (ver.5) aplikácii.
V je postup ako implementovať funkcionalitu "Prihlásenie". A v tejto časti to bude funkcionalita "Odhlásenie"

V servise "auth"(tj.v súbore "../services/auth.service.ts") definujem funkciu "logout", cez ktorú sa obraciam na požadované REST API rozhranie:

  ...
  // logout prihlaseneho pouzivatela:
  logout({headers: headers}) {
    const token = localStorage.getItem('token');
    return this.http.post(`${this.url}/logout`, 'body', { headers });
  }

Tlačítko [로그아웃] bude na stránke "Home"a objaví sa len vtedy ak bude momentálne používateľ prihlásený. Ak nebude prihlásený, bude tam dvojica tlačítok [등록] a [로그인].
Aby to takto fungovalo, musím upraviť kód v súbore stránky "home.page.html"takto:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <div *ngIf="loggedUser; else noLoggedUser">
      <strong>Moja Ionic app</strong>
      <div class="button-container">
        <ion-button (click)="logout()">Logout</ion-button>
      </div>
    </div>
    <ng-template #noLoggedUser>
      <strong>Moja Ionic app</strong>
      <div class="button-container">
        <ion-button (click)="goToRegisterPage()">Register</ion-button>
        <ion-button (click)="goToLoginPage()">Login</ion-button>
      </div>
    </ng-template>
  </div>

</ion-content>

"logout()"이 작동하지 않는 경우 "home.page.ts"에 대한 로그아웃이 발생할 수 있습니다.

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component } from '@angular/core';
import {NavController} from '@ionic/angular';
import { AlertController, LoadingController, ToastController } from '@ionic/angular';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  loggedUser = localStorage.getItem('token');

  constructor(
    private navCtrl: NavController,
    private loadingCtrl: LoadingController,
    private router: Router,
    private authService: AuthService,
    private alertCtrl: AlertController,
    private toastCtrl: ToastController,
  ) {}
  // prejst na prihlasovaci formular:
  goToLoginPage() {
    this.navCtrl.navigateForward('login');
  }
  // prejst na registracny formular:
  goToRegisterPage() {
    this.navCtrl.navigateForward('register');
  }

  // odhlasenie:
  // async logout() {
  async logout() {
    console.log('logged out ...');
    const loading = await this.loadingCtrl.create({
      message: 'Logging out ...'
    });
    await loading.present();
    const token = localStorage.getItem('token');
    let headers = new HttpHeaders({
      Authorization: 'Bearer '+token,
    });
    this.authService.logout({headers: headers}).subscribe(
      // ak je uspesne odhlasenie:
      async () => {
        const toast = await this.toastCtrl.create({
          message: 'User logged out',
          duration: 2000,
          color: 'dark'
        });
        await toast.present();
        loading.dismiss();
        // vymaze "token" z aplikacneho storage:
        localStorage.removeItem('token');
        // presmeruje na "home" stranku:
        await this.router.navigateByUrl('/');
        // reload-ne "home" stranku:
        location.reload();
      },
       // ak sa vyskytla nejaka chyba:
      async () => {
        const alert = await this.alertCtrl.create({
          message: 'There is an error',
          buttons: ['OK']
        });
        loading.dismiss();
        await alert.present();
      }
    );
  }
}

Ak si dám teraz zobraziť domovskú stránku "home", tj.URL:

http://localhost:8100/home

zobrazí sa (ak nie je používateľ prihlásený):


cez [로그인] sa dostanem na prihlasovací formulár "Login", kde vložiť správne prihlasovacie údaje:


a pokračovať cez [Login], čo vykoná prihlásenie a presmeruje na domovskú stránku "Home", ktorú ešte refrešne aby bolo zobrazené iba tlačítko [로그아웃]:


Ak sa chce teraz prihlásený používateľ odhlásiť, tak na tejto domovskej stránke "Home"kliknúť na [Logout], čo vykoná odhlásenie používateľa opäť presmeruje na domovskú stránku, ktorú ešte refrešne aby boli zobrazené aLog tlasiť [Refrešne aby boli zobrazené] a Log tlasiť :


pri odhlasovaní je dôležité volať POST request s informáciou v "header", kde je uvedený aktuálny token (ohlásiť možno len aktuálne prihláseného používateľa, tj.takého, ktorý má správny token) a tiež typ autentifikácie (tj."Bearer").
...