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) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== 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 generate guard shared/auth

Rövidítéssel:
  ng g g 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.


<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 src/app/shared/auth.service.ts>
//...
  isLoggedIn() {
    return true;

  }
</code>

===== Az AuthService javítása =====

Javítsuk az isLoggedIn() függvényt:

<code javascript>
  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 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');
  }
}

</code>