V tomto postupe ukážem obmedzenie/povolenie prístupu k určeným stránkam Ionic (ver.5) aplikácie pomocou funkcionality/konceptu "guard".
Mám vytvorenú Ionic aplikáciu s funkcionalitou registrácie nového používateľa (popísané v druhej časti), prihlásenia existujúceho používateľa (popísané v tretej časti) a odhlásenia prihláseného používateľa (popísané vo štvrtej časti).
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ý "guard", príkazom:
ionic generate guard guard/auth
pri vytváraní potvrdiť implementovaný interface typu:
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.
...
Top comments (0)