Autentifikácia v Ionic (ver.5) aplikácii cez REST API (5.časť) - prístup na stránky pomocou guard

V tomto postupe ukážem obmedzenie/povolenie prístupu k určeným stránkam Ionic (ver.5) 응용 프로그램 pomocou funkcionality/konceptu "guard".
Mám vytvorenú Ionic aplikáciu s funkcionalitou registrácie nového používateľa (popísané v ), prihlásenia existujúceho používateľa (popísané v ) a odhlásenia prihláseného používateľa (popísané vo ).

Teraz si vytvorím v tejto aplikácii nejaké ďalšie stránky, na ktorých prístup potom použijem "guard".
Vytvoriť si dve nové stránky príkazmi:

ionic generate page pages/profile
ionic generate page pages/portfolios

Tieto stránky ponechám prázdne (pre otestovanie to stačí).

Vytvoriť si teraz požadovaný "가드", príkazom:

ionic generate guard guard/auth

pri vytváraní potvrdiť implementovaný 인터페이스 유형:

CanActivate

Sú vytvorené v samostatnom adresári "guard"dva súbory:


V súbore "auth.guard.ts"doplniť/upraviť takto:

import { Injectable } from '@angular/core';
RouterStateSnapshot, UrlTree } from '@angular/router';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router,
  ) {}
  canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): 
    Observable<boolean> | Promise<boolean> | boolean {
      // const currentUser = this.authService.isLoggedIn;
      const currentUser = localStorage.getItem('token');
      if (currentUser) {
          // ak je pouzivatel autorizovany, prihlaseny:
          return true;
      }
      // ak nie je pouzivatel prihlaseny, presmeruje na "home":
      this.router.navigate(['/home']);
      return false;
    }
}

na overenie, či je používateľ prihlásený načítavam hodnotu "token"z lokálnej Storage aplikácie.
A Nakoniec ešte upraviť/doplniť v súbore "app-routing.module.ts"kód na prístup k jednotlivým stránkam:

    ...
  {
    path: 'profile',
    loadChildren: () => import('./pages/profile/profile.module').then( m => m.ProfilePageModule), canActivate: [AuthGuard]
  },
  {
    path: 'portfolios',
    loadChildren: () => import('./pages/portfolios/portfolios.module').then( m => m.PortfoliosPageModule)
  },
        ...

tj.pre stránku, ktorú chcem chrániť pre neautentifikovaným prístupom doplniť "canActivate: [AuthGuard]".
Ak teraz spustím túto Ionic aplikáciu a chcem ísť na stránku:

http://localhost:8100/profile

pokiaľ nie som prihlásený používateľ (akýkoľvek) tak sa na ňu nedostanem a presmeruje ma na default-nú stránku aplikácie.
Zatiaľ čo prístup na stránku:

http://localhost:8100/portfolios

nie je chránený a dostane sa na ňu aj neprihlásený (anonymný) používateľ aplikácie.
...