Безпека є першочерговим завданням в будь-якому додатку, і Angular надає потужне рішення через Route Guards. Давайте розглянемо, що таке Route Guards, чому вони важливі та як ефективно їх використовувати в ваших проектах на Angular.

Що таке Route Guards в Angular?

Route Guards в Angular — це інтерфейси, які дозволяють контролювати навігацію до маршрутів та з них. Вони виконують роль охоронців, вирішуючи, чи можна активувати, деактивувати або завантажити маршрут на основі заданої логіки.

Типи Route Guards

1. CanActivate:

• Визначає, чи можна отримати доступ до маршруту.
• Приклад: Перешкоджає неавторизованим користувачам доступити до адмін-сторінки.

2. CanActivateChild:

• Визначає, чи можна отримати доступ до дочірніх маршрутів.

3. CanDeactivate:

• Попереджає або забороняє користувачам залишати маршрут (наприклад, при незбережених змінах).

4. Resolve:

• Завантажує дані до навігації на маршрут.

5. CanLoad:

• Перешкоджає завантаженню лінійно завантажуваних модулів.

Як використовувати Route Guards

1. Створіть Guard
   Використовуйте Angular CLI для створення guard:

ng generate guard auth

Реалізуйте логіку:

import { Injectable } from '@angular/core';   
import { CanActivate, Router } from '@angular/router';   

@Injectable({ providedIn: 'root' })   
export class AuthGuard implements CanActivate {   
 constructor(private router: Router) {}   

 canActivate(): boolean {   
 const isLoggedIn = !!localStorage.getItem('authToken');   
 if (!isLoggedIn) {   
 this.router.navigate(['/login']);   
 return false;   
 }   
 return true;   
 }   
}

1. Застосуйте Guard до маршрутів

const routes: Routes = [   
 { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },   
];

3. Перевірте ваш Guard

• Перевірте, чи він блокує/перенаправляє неавторизований доступ.
• Переконайтеся, що авторизовані користувачі можуть отримати доступ до маршрутів.

Кращі практики для Route Guards

• Зберігайте логіку guard простішою та багаторазовою.
• Комбінуйте кілька guards для складніших сценаріїв.
• Тестуйте guards ретельно, щоб переконатися, що вони працюють як треба.
• Використовуйте guards разом з механізмами автентифікації та авторизації для повної безпеки.

Приклад використання

Уявімо собі додаток для електронної комерції:

• Використовуйте CanActivate щоб обмежити доступ до адмін-панелі лише для користувачів, які увійшли в систему.
• Використовуйте CanDeactivate щоб попередити користувачів про незбережені зміни під час процесу оформлення замовлення.

Висновок

Route Guards незамінні для забезпечення безпеки додатків на Angular та покращення користувацького досвіду. Оволодівши ними, ви зможете забезпечити, щоб ваш додаток залишався надійним та безпечним.

У наступному пості ми розглянемо Lazy Loading і як він покращує продуктивність додатків на Angular.

Є питання про Route Guards? Обговоримо в коментарях! 😊

Angular #WebDevelopment #FrontendDevelopment #RouteGuards #Typescript #Routes

Перекладено з: Angular Route Guards: Securing Your App’s Navigation