oktatas:web:angular:angular_utvonalak_vedelme
Tartalomjegyzék
Angular - Útvonalak védelme
- Szerző: Sallai András
- Copyright © 2024, Sallai András
- Web: https://szit.hu
Fő komponens
- src/app/app.component.html
<router-outlet />
AuthService
Az AuthService osztályban szükségünk lesz egy isLoggedIn() metódusra.
- src/app/shared/auth.service.ts
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AuthService { constructor() { } isLoggedIn() { return true; } }
AuthGuard
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 generate guard shared/auth
Rövidítéssel:
ng g g shared/auth
Létrehozáskor rákérdez milyen típusokat szeretnénk:
>(*) CanActivate ( ) CanActivateChild ( ) CanDeactivate ( ) CanLoad
A szóközzel jelölhetek ki, a le és fel billentyűvel választhatok, az Enter billentyűre továbblép.
- src/app/shared/auth.guard.ts
import { inject } from '@angular/core'; import { CanActivateFn } from '@angular/router'; import { AuthService } from './auth.service'; export const authGuard: CanActivateFn = (route, state) => { const authService = inject(AuthService); if (!authService.isLoggedIn()) { return false; } return true; };
Komponens
Legyen egy védett komponens Valami névű.
ng g c valami
Routing
- src/app/app.routes.ts
import { Routes } from '@angular/router'; import { ValamiComponent } from './valami/valami.component'; import { authGuard } from './shared/auth.guard'; export const routes: Routes = [ { path: 'valami', component: ValamiComponent, canActivate: [authGuard] }, ];
Teszt
A böngészőbe írjuk be:
http://localhost:4200/valami
Próbáljuk meg true és false értékkel is az isLoggedIn() függvényben.
- src/app/shared/auth.service.ts
//... isLoggedIn() { return true; }
Az AuthService javítása
Javítsuk az isLoggedIn() függvényt:
isLoggedIn() { return !!localStorage.getItem('login_token'); }
Teljes kód
Teljes kód:
- src/app/shared/auth.service.ts
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AuthService { constructor() { } login(user: string, pass: string): boolean { if(user === 'admin' && pass === 'admin') { const authToken = 'aaa' localStorage.setItem('login_token', authToken); return true; }else { return false; } } logout() { localStorage.removeItem('login_token'); } isLoggedIn() { return !!localStorage.getItem('login_token'); } }
oktatas/web/angular/angular_utvonalak_vedelme.txt · Utolsó módosítás: 2025/03/02 17:01 szerkesztette: admin