Angular guards е функция, която може да ви помогне по много начини, когато кодирате в Angular. Да приемем например, че имате важен файл с данни, до който искате само определени хора да имат достъп.
Като използвате охрана, можете да се уверите, че само хората с правилните разрешения могат да преглеждат и редактират файла.
Guards са директиви в Angular, които ни позволяват да контролираме потока на достъп до функциите в нашето приложение. Те могат да се използват за блокиране на достъпа до определени маршрути или за ограничаване на данните, които потребителят може да види.
В тази статия ще проучим как предпазителите могат да се използват в Angular за подобряване на сигурността и защита на данните.
Guards са директиви в Angular, които ни позволяват да контролираме потока на достъп до функциите в нашето приложение.
Те могат да се използват за блокиране на достъпа до определени маршрути или за ограничаване на данните, които потребителят може да види. В тази статия ще проучим как предпазителите могат да се използват в Angular за подобряване на сигурността и защита на данните.
Цели на обучението
В тази лекция ще научите:
- Въведение в ъгловата защита
- Петте различни вида ъглови предпазители
- Може да активира охраната
- Може да деактивира охраната
- CanActivateChild guard
- CanLoad предпазител
- Решете охраната
Въведение:
Ролята на ъгловата охрана е да защитава маршрути. Guard може да предотврати неоторизиран достъп до маршрут в angular или може да пренасочи потребителите към различен маршрут.
Angular Guard е функция, която помага за осигуряване на маршрути във вашето приложение. Когато потребител се опита да получи достъп до маршрут, който е защитен от Angular Guard, пазачът ще извърши някои проверки, за да види дали на потребителя е разрешен достъп до маршрута.
Ако потребителят има разрешение, той ще може да продължи. Ако не, те ще бъдат пренасочени към друга страница или ще получат съобщение за грешка. Има различни видове Angular Guards, като Route Guards и Auth Guards.
Най-честата употреба на ъглов предпазител е за защита на компоненти, които са заредени бавно.
Когато потребител се опита да зареди Компонент отложено, рутерът първо ще провери дали потребителят е упълномощен за достъп до Компонента.
Ако потребителят не е оторизиран, рутерът ще го пренасочи към различен маршрут. Пазачите могат също да се използват за защита на данните, които се извличат от API. Ако данните, които се извличат, не са публични, ъгловата защита ще предотврати неоторизиран достъп и ще върне съобщение за грешка.
Пет различни вида Router Guard
Guard е една от важните функции на Angular, която ни помага да контролираме достъпа до конкретните маршрути.
Много е важно да разберете различните типове предпазители, защото те играят жизненоважна роля за осигуряването на нашите Angular приложения.
В тази статия ще обсъдим различните видове предпазители и как те могат да бъдат използвани за защита на нашите Angular приложения.
В Angular има пет различни вида предпазители:
- CanActivate guard: CanActivate guard се използва, за да реши дали даден маршрут може да бъде активиран или не.
- CanDeactivate guard: CanDeactivate guard се използва, за да реши дали даден маршрут може да бъде деактивиран или не.
- CanActivateChild guard: CanActivateChild guard се използва за предотвратяване на неоторизиран достъп до дъщерни маршрути.
- CanLoad guard: Canload guard се използва за решаване дали даден модул може да бъде зареден или не.
- Resolve guard: Resolve resolve guard е функция на рутера, която ви позволява да извличате предварително данни, преди да покажете маршрут
CanActivate guard се използва за контрол дали даден маршрут може да бъде активиран или не. Ако охраната се върне true, маршрутът може да бъде активиран; в противен случай ще бъде блокиран.
Тази защита се използва за защита на маршрути от достъп от неупълномощени потребители. Те обикновено се използват за извършване на проверки за удостоверяване и оторизация.
Да влезем в един пример:
Създайте файл с конвенция за именуване: guardName.guard.ts, вътре в този файл ще внедрим интерфейса за CanActivate, предоставен от Angular.
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(private _router:Router ) {
}
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
//check some condition
if (yourCondition) {
alert('You are not allowed to view this page');
//redirect to login/home page etc
//return false to cancel the navigation
return false;
}
return true;
}
}Сега е време просто да актуализирате файла на рутера и да видите магията :)
{ path: 'product', component: ProductComponent, canActivate : [AuthGuardService] },Един от пазачите е CanDeactivate Guard. Този предпазител се използва за защита на маршрути от случайно навигиране.
Може да се използва за подкана към потребителя за потвърждение, преди да навигирате далеч от незапазените промени.
CanDeactivate Guard е внедрен като интерфейс с един метод canDeactivate().
Този метод приема два аргумента: компонентът, от който се навигира, и незадължителен активиранRouteSnapshot, съдържащ информация за маршрута, към който се навигира.
Методът canDeactivate() трябва да върне true или false.
Ако върне true, навигацията ще продължи. Ако върне false, навигацията ще бъде отменена.
import { Injectable } from '@angular/core'; import { CanDeactivate } from '@angular/router'; import { Observable } from 'rxjs/Observable'; export interface CanComponentDeactivate { canDeactivate: () => Observable | Promise | boolean | UrlTree; } @Injectable() export class CanDeactivateGuard implements CanDeactivate { canDeactivate(component: CanComponentDeactivate, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return component.canDeactivate ? component.canDeactivate() : true; } }{ path: 'product', component: ProductComponent, canDeactivate: [CanDeactivateGuard] }
Защитата CanActivateChild се използва за защита на маршрути, които може да имат деца. Тази защита е подобна на защитата CanActivate, с изключение на това, че приема допълнителен параметър на маршрута, който е дъщерният маршрут, който трябва да се активира.
Защитата CanActivateChild се извиква, преди да бъдат активирани дъщерни маршрути. Ако защитата върне false или обещание, което се разрешава на false, тогава дъщерният маршрут няма да бъде активиран.
В противен случай, ако защитата върне true или Promise, което се разрешава като true, тогава дъщерният маршрут ще бъде активиран.
Защитата на CanActivateChild има достъп до същите параметри ActivatedRouteSnapshot и RouterStateSnapshot, които са достъпни за защитата на CanActivate.
Тези параметри могат да се използват за достъп до информация за текущия маршрут и състоянието на рутера.
{ path: 'product', component: ProductComponent, canActivate : [AuthGuardService],
canActivateChild : [AdminGuardService],
children: [
{ path: 'view/:id', component:ItemViewComponent },
{ path: 'edit/:id', component: ItemEditComponent },
{ path: 'add', component: ItemAddComponent }
]
}CanLoad предпазител
В Angular защитата на canLoad предотвратява зареждането на лениво зареден модул, ако потребителят не е оторизиран. Тази защита се използва за защита на чувствителни данни от достъп от неупълномощени потребители.
Защитата на canLoad се реализира с помощта на метода canLoad() на класа NgModule. Този метод приема маршрут като аргумент и връща булева стойност.
Ако върнатата стойност е истина, модулът се зарежда; ако е false, модулът не се зарежда. Защитата на canLoad се извиква, когато потребителят се опита да навигира до модул с отложено зареждане.
Ако защитата върне false, навигацията се прекъсва и потребителят остава на текущата страница.
import { Injectable } from '@angular/core'; import { MatDialog } from '@angular/material'; import { CanLoad } from '@angular/router'; import { SomeComponent } from './shared/some/some.component'; @Injectable({ providedIn: 'root' }) export class CanLoadGuard implements CanLoad { constructor(private dialog: MatDialog) {} canLoad(): boolean { if (someCondition) { const dialogRef = this.dialog.open(SomeComponent, {width: '400px'}); return false; } else { return true; } } }{ path: 'users', loadChildren: './modules/user/user.module#userModule', canActivate: [AuthGuard], canLoad: [CanLoadGuard] },
Решете охраната
Когато работите с Angular, е важно да знаете как да използвате резолюцията.
Защитата за разрешаване ви позволява да се погрижите за зависимостите от данни, преди компонентът дори да бъде създаден. Това е особено полезно, когато трябва да направите извикване на API или да заредите данни от файл
@Injectable() export class UserDetailResolver implements Resolve { constructor(private userService: UserService, private router: Router) { } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { let id = route.paramMap.get('user-id') ?? ''; console.log('Resolving for person id:' + id); return this.userService.getUser(id).then(person => { if (person) { return person; } else { this.router.navigate(['/user/userList']); return null; } }); } }{ path: 'userList', component: UserListComponent, children: [ { path: 'detail/:user-id', component: UserDetailComponent, resolve: { userDetail: UserDetailResolver } } ] }
Guards е функция в Angular, която помага на разработчиците да контролират достъпа до определени части на приложението.
Използвайки angular guard, разработчиците могат да контролират кой има достъп до какви функции и също така могат да персонализират поведението на приложението въз основа на ролята на потребителя.
Angular guards са един от инструментите, които помагат на разработчиците да създават уеб приложения. Като разрешават и забраняват определени маршрути, те дават на разработчика повече контрол върху начина, по който потребителите взаимодействат с приложението.
Освен това предпазителите могат да се използват за защита на данните, като позволяват достъп до тях само на определени потребители. Това ги прави важна част от сигурността на уеб приложенията.
Свързани теми:
„Какво отличава Angular от другите рамки?“
„Оптимизирайте вашата Angular архитектура за максимална производителност 2023 г.“
Какво е новото в angular 14, научете какви са подобренията и характеристиките на v14.
Топ 9 често използвани rxjs оператори в angular
Първоначално публикувано на https://www.akashminds.com.
