Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_utvonalak_vedelme [2023/02/15 13:22] – [Guard] admin
+++ oktatas:web:angular:angular_utvonalak_vedelme [2025/03/02 17:01] (aktuális) – admin
@@ Sor 4: / Sor 4: @@
   * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2023
+  * Copyright (c) 2024, Sallai András
   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
   * Web: https://szit.hu
-===== Guard =====
+===== Fő komponens =====
+<code javascript src/app/app.component.html>
+<router-outlet />
+</code>
+===== AuthService =====
+Az AuthService osztályban szükségünk lesz egy isLoggedIn() metódusra.
+<code javascript src/app/shared/auth.service.ts>
+import { Injectable } from '@angular/core';
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  constructor() { }
+  isLoggedIn() {
+    return true;
+  }
+}
+</code>
+===== 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 g guard shared/auth
+  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:
@@ Sor 26: / Sor 56: @@
 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 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;
+};
+</code>
+===== Komponens =====
+Legyen egy védett komponens Valami névű.
+  ng g c valami
+===== Routing =====
+<code javascript 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]
+  },
+];
+</code>
+===== Teszt =====
+A böngészőbe írjuk be:
+<code>
+http://localhost:4200/valami
+</code>
+Próbáljuk meg true és false értékkel is az isLoggedIn() függvényben.
-<code javascript auth.service.ts>
+<code javascript src/app/shared/auth.service.ts>
+//...
   isLoggedIn() {
-    if (localStorage.getItem('currentUser') === null) {
-      return false;
-    }
     return true;
   }
 </code>
+===== Az AuthService javítása =====
-<code javascript auth.guard.ts>
+Javítsuk az isLoggedIn() függvényt:
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
-import { Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
+<code javascript>
-import { AuthService } from './auth.service';
+  isLoggedIn() {
+    return !!localStorage.getItem('login_token');
+  }
+</code>
+===== Teljes kód =====
+Teljes kód:
+<code javascript src/app/shared/auth.service.ts>
+import { Injectable } from '@angular/core';
 @Injectable({
   providedIn: 'root'
 })
-export class AuthGuard implements CanActivate {
+export class AuthService {
-  constructor(
+  constructor() { }
-    private auth: AuthService,
-    private router: Router
-    ) {}
-  canActivate()
-      route: ActivatedRouteSnapshot,
-      state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+  login(user: string, pass: string): boolean {
-    if( this.auth.isLoggedIn() ) {
+    if(user === 'admin' && pass === 'admin') {
+      const authToken = 'aaa'
+      localStorage.setItem('login_token', authToken);
       return true;
+    }else {
+      return false;
     }
-    this.router.navigate(['login']);
-    return false;
   }
-}
-</code>
+  logout() {
+    localStorage.removeItem('login_token');
+  }
+  isLoggedIn() {
+    return !!localStorage.getItem('login_token');
+  }
+}
-<code javascript app-routing.module.ts>
-const routes: Routes = [
-  {
-    path: 'employees',
-    component: EmployeeComponent,
-    canActivate: [AuthGuard]
-  },
-  {path: '**', component: NopageComponent}
-];
 </code>