Dinamičko rutiranje u Angularu 2025: Injektujte servis direktno u redirectTo

Angular je upravo olakšao život developerima novom funkcionalnošću: injektovanje servisa direktno u redirectTo svojstvo u konfiguraciji ruta. Nakon ove novine, dinamička redirekcija je mnogo jednostavnija jer je rutiranje postalo fleksibilnije. U nastavku ću Vam pokazati kako to funkcioniše i zašto bi trebalo da počnete da je koristite već danas.

Problem sa dinamičkom redirekcijom

Do sada, za dinamička preusmeravanja u Angular rutama trebalo je da koristite zaobilazna rešenja. Na primer, ako ste hteli da injektujete servis (poput autentifikacije korisnika) i na osnovu njega odlučite na koju rutu treba preusmeriti korisnika, morali ste da koristite guard-ove ili složenu logiku. To je dovodilo do viška nepotrebnog koda i činilo aplikaciju teškom za održavanje.

Pre nego što je ova funkcionalnost uvedena, Vaša konfiguracija ruta je izgledala ovako:

 1   export const routes: Routes = [
 2     {
 3        path: '',
 4        redirectTo: '/dashboard',
 5        pathMatch: 'full'
 6     }
 9   ];

Ali šta ako Vam je bila potrebna sofisticiranija logika na osnovu koje biste preusmeravali korisnika? Šta ako je, na primer, Vaša logika preusmeravanja zavisila od statusa autentifikacije korisnika?

🔥 Rešenje

Konačno možete da rešite ovu situaciju, i to bez pisanja previše koda, tako što injektujete zavisnosti u redirectTo svojstvo.

Evo kako se to radi u praksi:

 1   export const routes: Routes = [
 2     {
 3        path: '',
 4        redirectTo: inject(AuthService).isAuthenticated() ? '/dashboard' : '/login',
 5        pathMatch: 'full'
 6     }
 9   ];

Zašto je ovaj pristup toliko sjajan?

Evo prvih nekoliko razloga:

1. Čistiji kod: Nema potrebe da pišete guard-ove ili redirekciju u komponentama
2. Više fleksibilnosti: Sada rutiranje može zavisiti od podataka u runtime-u (kao što su sesije autentifikacije, role)
3. Manje nepotrebnog koda: Omogućava Vam da ne morate pisati sličan kod na više mesta

Kada treba da koristite ovo?

Ovu funkcionalnost treba da koristite kada morate dinamički da odaberete gde da preusmerite korisnika na osnovu podataka u realnom vremenu. Na primer:

1. Preusmeravanje korisnika nakon prijave na osnovu role (administrator vs. korisnik)
2. Uslovno preusmeravanje na osnovu API odgovora
3. Preusmeravanje na osnovu korisničkih preferencija ili sačuvanih podešavanja

🎉 Zaključak

Mogućnost injektovanja zavisnosti u redirectTo je funkcionalnost koju su Angular developeri dugo priželjkivali. Korišćenjem ove opcije, smanjujete količinu koda koji morate da napišete i pojednostavljujete logiku rutiranja, čak i kada je dinamička.