szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!

[[oktatas:web:angular|< Angular]]

====== Angular - Útvonalak védelme ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Guard =====

Az egyes útvonalak védelméről a guard nevű eszközzel tudunk gondoskodni.

A shared nevű könyvtárban fogom létrehozni (nem kötelező itt létrehozni):
  ng g guard shared/auth

Létrehozáskor rákérdez milyen típusokat szeretnénk:

<code>
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad
</code>

A szóközzel jelölhetek ki, a le és fel billentyűvel választhatok, az Enter billentyűre továbblép.

Szükségünk van egy metódusra, ami megmondja, hogy azonosítva vagyunk-e.


<code javascript auth.service.ts>
  isLoggedIn() {
    if (localStorage.getItem('currentUser') === null) {
      return false;
    }    
    return true;
  }
</code>


<code javascript auth.guard.ts>
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
import { Router, RouterStateSnapshot, UrlTree } from '@angular/router';

import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private auth: AuthService,
    private router: Router
    ) {}
  canActivate()
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

  
    if( this.auth.isLoggedIn() ) {
      return true;
    }
    this.router.navigate(['login']);
    return false;
  }
  
}

</code>


<code javascript app-routing.module.ts>
const routes: Routes = [
  {
    path: 'employees', 
    component: EmployeeComponent,
    canActivate: [AuthGuard]
  },
  {path: '**', component: NopageComponent}
];
</code>

szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon