V prvej časti sú informácie o tom, aké sú REST API volania a čo (v prípade úspechu) vracajú.
V druhej časti je postup ako vytvoriť funkcionalitu "Registrácia" v Ionic (ver.5) aplikácii.
V tretej časti 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 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ý):
cez [Login] 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 [Logout]:
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]:
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").
...
Top comments (0)