Autentifikácia v Ionic (ver.5) aplikácii cez REST API (4.časť) - odhlásenie
Tags: ionic
Published: 2022-09-24 15:25:06

V [prvej časti](https://dev.to/jurajchovan/autentifikacia-v-ionic-ver5-aplikacii-cez-rest-api-1cast-2n6d) sú informácie o tom, aké sú REST API volania a čo (v prípade úspechu) vracajú.
V [druhej časti](https://dev.to/jurajchovan/autentifikacia-v-ionic-ver5-aplikacii-cez-rest-api-2cast-15j3) je postup ako vytvoriť funkcionalitu "Registrácia" v Ionic (ver.5) aplikácii.
V [tretej časti](https://dev.to/jurajchovan/autentifikacia-v-ionic-ver5-aplikacii-cez-rest-api-3cast-463l) 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 [Logout] 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 [Register] a [Login].
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>
```
Stlačením [Logout] (ak je používateľ prihlásený) sa volá funkcia "logout()", ktorú je potrebné doplniť so súboru logiky stránky "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ý):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4q0qc8vd5cytrpf68ob.PNG)
cez [Login] sa dostanem na prihlasovací formulár "Login", kde vložiť správne prihlasovacie údaje:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oee8eohopfob4styypbp.PNG)
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 [Logout]:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xukq8vlw9nh21y17n9zo.PNG)
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 a opäť presmeruje na domovskú stránku "Home", ktorú ešte refrešne aby boli zobrazené tlačítka [Register] a [Login]:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wm5wp40jvxeiqonu6f9.PNG)
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").
...