Autentifikácia v Ionic (ver.5) aplikácii cez REST API (5.časť) - prístup na stránky pomocou guard
Tags: ionic
Published: 2022-10-01 07:44:21

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](https://dev.to/jurajchovan/autentifikacia-v-ionic-ver5-aplikacii-cez-rest-api-2cast-15j3)), prihlásenia existujúceho používateľa (popísané v [tretej časti](https://dev.to/jurajchovan/autentifikacia-v-ionic-ver5-aplikacii-cez-rest-api-3cast-463l)) a odhlásenia prihláseného používateľa (popísané vo [štvrtej časti](https://dev.to/jurajchovan/autentifikacia-v-ionic-ver5-aplikacii-cez-rest-api-4cast-odhlasenie-53cb)).

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:

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