Angular Guards haqida

👮‍♂️ Guards — bu sahifalarni “qo‘riqlab turadigan” nazoratchi hisoblanadi.
Ya’ni foydalanuvchi bir sahifaga o‘tmoqchi bo‘lganda, avval Guard tekshiradi:

“Bu odam bu yerga kira oladimi yoki yo‘qmi?”

• Agar ruxsat bo‘lsa → sahifaga kiradi
• Agar ruxsat bo‘lmasa → boshqa sahifaga yuboriladi (masalan, login sahifaga)

Angular 5 ta asosiy Guard turini taklif qiladi:

1. CanActivate — Route’ga kirish (faollashtirish) mumkin yoki mumkin emasligini aniqlaydi.
2. CanActivateChild — Child (ichki) route’lar faollashishi mumkinligini aniqlaydi.
3. CanDeactivate — Joriy route’dan chiqish mumkin yoki mumkin emasligini aniqlaydi.
4. Resolve — Route faollashishidan oldin kerakli ma’lumotlarni olib keladi.
5. CanLoad — Shartlar bajarilmaguncha lazy-loaded modullar yuklanishini oldini oladi.

Angular’dagi barcha guard’lar service hisoblanadi. Ular DI (Dependency Injection) orqali service sifatida ishlaydi.

Misollarni ko‘rishdan oldin umumiy bir service yaratib olamiz:

@Injectable({ providedIn: 'root' })
export class AuthService {
  isLoggedIn(): boolean {
    return !!localStorage.getItem('token');
  }

  hasRole(role: string): boolean {
    return localStorage.getItem('role') === role;
  }
  hasUnsavedChanges(): boolean {
    return true;
  }
  loadUser() {
    return of({ id: 1, name: 'User' });
  }
}

1. CanActivate

CanActivate guard foydalanuvchi biror route’ga kira oladimi yoki yo‘qligini aniqlaydi.
Masalan, foydalanuvchi login qilmagan bo‘lsa, admin sahifaga kirishini cheklash mumkin.

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

canActivate() {
    return this.auth.isLoggedIn();
  }
}

Ishlatilishi:

{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [AuthGuard]
}

2. CanActivateChild

CanActivateChild CanActivate qiladigan ishni qiladi, faqat child route’lar uchun. U parent route’ning o‘zi uchun ishlamaydi, faqat ichidagi route’larni tekshiradi.

@Injectable({ providedIn: 'root' })
export class ChildGuard implements CanActivateChild {
  constructor(private auth: AuthService) {}

  canActivateChild() {
    return this.auth.isLoggedIn();
  }
}

Ishlatilishi:

{
  path: 'admin',
  canActivateChild: [ChildGuard],
  children: [
    { path: 'users', component: UsersComponent },
    { path: 'settings', component: SettingsComponent }
  ]
}

3. CanDeactivate

Bu guard foydalanuvchiga ma’lum shartlar bajarilgandagina sahifadan chiqishga ruxsat beradi.
Ko‘pincha formani tahrirlayotganda ma’lumotlar yo‘qolib ketmasligi uchun ishlatiladi.

@Injectable({ providedIn: 'root' })
export class LeaveGuard implements CanDeactivate<any> {
  constructor(private auth: AuthService) {}

  canDeactivate() {
    return this.auth.hasUnsavedChanges()
      ? confirm("Saqlanmagan ma'lumotlar bor! Chiqasizmi?")
      : true;
  }
}

Ishlatilishi:

{
  path: 'form',
  component: FormComponent,
  canDeactivate: [LeaveGuard]
}

4. Resolve

Resolve guard route ishga tushishidan oldin kerakli ma’lumotlarni olib keladi.
Bu sahifa ochilishidan avval barcha zarur data tayyor bo‘lishini ta’minlaydi.

Get Ruzmatboy Jumaniyozov’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Misol: Foydalanuvchi ma’lumotlarini oldindan yuklab olish.

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<any> {
  constructor(private auth: AuthService) {}

  resolve() {
    return this.auth.loadUser();
  }
}

Ishlatilishi:

{
  path: 'profile',
  component: ProfileComponent,
  resolve: {
    user: UserResolver
  }
}

Component ichida:

this.route.snapshot.data['user'];

5. CanLoad

Bu guard ma’lum shartlar bajarilmaguncha lazy-loaded modullarni yuklanishiga yo‘l qo‘ymaydi.
Bu ilovaning performance’ini va xavfsizligini oshiradi.

@Injectable({ providedIn: 'root' })
export class AuthLoadGuard implements CanLoad {
  constructor(private authService: AuthService, private router: Router) {}

  canLoad(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Ishlatilishi:

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [AuthLoadGuard]
  }
];

Muhim tavsiyalar

Guard’larni sodda tuting
Guard ichida faqat oddiy va tushunarli tekshiruvlar bo‘lsin.
Murakkab mantiq bo‘lsa, uni alohida service ichiga ko‘chiring.

Guard ichida og‘ir amallarni qilmaslik
Guard ichida API chaqirishdan qoching, chunki bu navigatsiyani sekinlashtiradi.
Agar data oldindan kerak bo‘lsa, Resolve guard’dan foydalaning.

Guard’larni to‘g‘ri kombinatsiya qiling
Bitta route’da bir nechta guard ishlatish mumkin:

• Biri login tekshiradi
• Biri role tekshiradi
• Biri form saqlanganini tekshiradi

Shu bilan navigatsiyani to‘liq nazorat qilish mumkin.

Bloklangan navigatsiya haqida foydalanuvchiga xabar bering
Agar foydalanuvchi ruxsat yo‘qligi sabab boshqa sahifaga yo‘naltirilsa, sababini tushuntirib beruvchi xabar chiqaring.
Masalan: “Sizda bu sahifaga kirish huquqi yo‘q.”

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canLoad: [AuthLoadGuard] }
];