Angular 14 bize pek çok harika özellik getirdi. Bunlardan biri Fonksiyonel rota korumaları. Belirli bir arayüzü genişleten bir sınıf oluşturmak yerine, true veya false döndüren basit bir fonksiyon yazabilirsiniz. Bu, rota korumaları için pek çok yeni fırsatın önünü açtı.

 

Rota korumalarından biri canMatch koruması. canMatch, canLoad ve canActivate’in yerini alıyor.

 

canMatch basittir. Bir rotanın geçerli URL ile eşleşip eşleşmediğini söyler. Angular, Routes dizisindeki rotaları yukarıdan aşağıya doğru eşleştirir. Bu, aynı rotanın farklı yerlere gitmesini istiyorsak bunu yapabileceğimiz anlamına gelir. 

 

Örneğin, aşağıdaki rotalara sahip olduğumuzu varsayalım:

 

 

import { Routes } from '@angular/router';

export const abcTestingRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('/a.component').then((m) => m.AComponent),
    canMatch: [() => d100() < 20],
  },
  {
    path: '',
    loadComponent: () => import('/b.component').then((m) => m.BComponent),
    canMatch: [() => d100() < 50],
  },
  {
    path: '',
    loadComponent: () => import('/c.component').then((m) => m.CComponent),
    canMatch: [() => d100() < 25],
  },
  {
    path: '',
    loadComponent: () => import('/d.component').then((m) => m.DComponent),
  },
  {
    path: '**',
    redirectTo: '',
  },
];

const d100 = (): number => Math.floor(Math.random() * 99) + 1;

 

Bu örnekte, 1 ile 100 arasında rastgele bir sayı döndüren bir d100() fonksiyonumuz var. Her yolun aynı ‘ ’ yolu ile eşleştiğine dikkat edin. Angular ilk yolu eşleştirmeye çalıştığında, d100() fonksiyonunu çağırır ve bir değer alır. Bu değer 20’den küçükse, bu yol eşleşir ve AComponent’i tembel olarak yükleriz. Değer 20'yi aşarsa, bu yol eşleşmez ve bir sonraki rotaya geçeriz. Angular tekrar d100() işlevini çağırır ve yeni bir değer alır. Bu değer 50'den küçükse BC Bileşeni yüklenir. Aksi takdirde, bir sonraki rotaya geçer.

 

Bu kalıp, üzerinde canMatch bulunmayan son yola kadar devam eder. Bu yol her zaman ‘ ’ ile eşleşecektir. Bu, stratejimizin anahtarıdır. Son yol her zaman eşleşmelidir. Bu şekilde, her olasılığı ele alabiliriz. canMatch’in nasıl çözüldüğüne bağlı olarak farklı bileşenler yükleyebiliriz.

 

“Bu stratejinin faydası nedir?” diye sorabilirsiniz. Yolları bu şekilde ayarlamak için pek çok neden vardır. Örneğin, birisinin yönetici, yetkili kullanıcı veya yetkisiz olup olmadığını söyleyen bir servisiniz olduğunu varsayalım. Bu strateji ile AdminViewComponent’i göstermek için canMatch for admin özelliğini kullanabiliriz. LoggedInViewComponent’i göstermek için canMatch for authorized users’ı kullanabiliriz. Son olarak, GuestViewComponent’i göstermek için varsayılan yolu (canMatch olmadan) kullanabiliriz.

 

canMatch kullanarak rotalarımızın eşleşme sırasını güvenilir ve tahmin edilebilir bir şekilde kontrol edebiliriz. Bu, karmaşık senaryoları kullanımı kolay bir şekilde oluşturmamızı sağlar. Bu stratejinin işe yarayabileceği başka senaryolar düşünebiliyor musunuz?

 

Aklınıza geliyorsa yorumlarda bahsedebilirsiniz.