Kreirajte dinamičke rute u Next.js sa Route Guards i korisničkom autentifikacijom

Uvod

Next.js je popularan JavaScript frejmverk za izgradnju performansnih i visoko skalabilnih veb aplikacija. On pruža niz karakteristika koje olakšavaju razvoj dinamičkih aplikacija, uključujući dinamičke rute i Route Guards. U ovom članku ćemo istražiti kako da koristimo ove karakteristike da bi kreirali dinamičke rute koje se mogu zaštititi korisničkom autentifikacijom.

Šta su dinamičke rute?

Dinamičke rute su rute koje dozvoljavaju da deo rute bude promenljiva. Na primer, umesto da imamo statičku rutu kao što je /članci/1, možemo da koristimo dinamičku rutu kao što je /članci/[id], gde [id] predstavlja promenljivu. Ovo nam omogućava da kreiramo jedinstvene rute za svaki članak bez potrebe da ručno definišemo svaku rutu.

Šta su Route Guards?

Route Guards su funkcije koje se pozivaju pre nego što se učitaju komponente puta. Oni dozvoljavaju da proverimo da li je korisnik prijavljen, da ima odgovarajuće dozvole ili da izvrši bilo koje druge provere pre nego što se učitaju komponente puta. Ovo je korisno za zaštitu osetljivih ruta od neprijavljenih ili neautorizovanih korisnika.

Kako kreirati dinamičke rute u Next.js?

Da bismo kreirali dinamičke rute u Next.js, koristimo sintaksu zagrada u fajlovima stranica. Na primer, da bismo kreirali dinamičku rutu za pojedinačni članak, koristili bismo sledeći kod:

js
import { useRouter } from 'next/router';

export default function Članak() {
const router = useRouter();
const { id } = router.query;

// ... kod za prikaz članka sa id-om id
}


Ovaj kod će kreirati dinamičku rutu na /članci/[id], gde [id] predstavlja promenljivu. Kada se učita ova ruta, Next.js će popuniti objekat query u useRouter huku sa ključ-vrednosnim parovima parametara rute. U ovom primeru, router.query.id će sadržati id članka koji se prikazuje.

Kako zaštititi dinamičke rute korisničkom autentifikacijom?

Da bismo zaštitili naše dinamičke rute korisničkom autentifikacijom, možemo da koristimo Route Guards. Route Guards se definišu kao funkcije koje se pozivaju pre nego što se učita komponenta puta. U ovim funkcijama, možemo da proverimo da li je korisnik prijavljen i ako nije, da ga preusmerimo na stranicu za prijavu.

Da bismo kreirali Route Guard u Next.js, koristimo getServerSideProps funkciju. Ova funkcija se poziva na serveru pre nego što se učita komponenta puta. U ovoj funkciji, možemo da proverimo da li je korisnik prijavljen. Ako nije, možemo da vratimo preusmerenje na stranicu za prijavu.

Na primer, da bismo zaštitili našu dinamičku rutu za pojedinačne članke, koristili bismo sledeći kod:

js
export async function getServerSideProps(context) {
const { req, res } = context;

// Provera da li je korisnik prijavljen
if (!req.isAuthenticated) {
// Preusmerenje na stranicu za prijavu
return {
redirect: {
destination: '/prijava',
permanent: false,
},
};
}

// ... kod za pribavljanje podataka članka sa id-om iz context.params.id

return {
props: {
// Prosleđivanje podataka članka komponenti stranice
},
};
}


Zaključak

Dinamičke rute i Route Guards su moćne funkcije u Next.js koje nam omogućavaju da kreiramo dinamičke i bezbedne veb aplikacije. Koristeći dinamičke rute, možemo da definišemo fleksibilne rute koje mogu da obrađuju promenljive parametre. Koristeći Route Guards, možemo da zaštitimo te rute od neprijavljenih ili neautorizovanih korisnika. U ovom članku smo istražili kako da koristimo ove karakteristike da bi kreirali dinamičke rute koje se mogu zaštititi korisničkom autentifikacijom.

Često postavljana pitanja

1. Šta su Route Guards?

Route Guards su funkcije koje se pozivaju pre nego što se učita komponenta puta. Oni nam omogućavaju da proverimo da li je korisnik prijavljen, da ima odgovarajuće dozvole ili da izvrši bilo koje druge provere pre nego što se učitaju komponente puta.

2. Kako kreirati dinamičku rutu u Next.js?

Da bismo kreirali dinamičku rutu u Next.js, koristimo sintaksu zagrada u fajlovima stranica. Na primer, da bismo kreirali dinamičku rutu za pojedinačni članak, koristili bismo sledeći kod:

js
import { useRouter } from 'next/router';

export default function Članak() {
const router = useRouter();
const { id } = router.query;

// ... kod za prikaz članka sa id-om id
}


3. Kako zaštititi dinamičku rutu korisničkom autentifikacijom?

Da bismo zaštitili dinamičke rute korisničkom autentifikacijom, možemo da koristimo Route Guards. Route Guards se definišu kao funkcije koje se pozivaju pre nego što se učita komponenta puta. U ovim funkcijama, možemo da proverimo da li je korisnik prijavljen i ako nije, da ga preusmerimo na stranicu za prijavu.

4. Šta je getServerSideProps funkcija?

getServerSideProps funkcija je funkcija koja se poziva na serveru pre nego što se učita komponenta puta. Ona nam omogućava da pribavimo datos na serveru i da ih prosledimo komponenti puta.

5. Kako proveriti da li je korisnik prijavljen u getServerSideProps funkciji?

Da bismo proverili da li je korisnik prijavljen u getServerSideProps funkciji, možemo da koristimo req.isAuthenticated svojstvo. Ovo svojstvo je dostupno ako koristimo paket za autentifikaciju kao što je passport.

6. Kako preusmeriti korisnika na stranicu za prijavu u getServerSideProps funkciji?

Da bismo preusmerili korisnika na stranicu za prijavu u getServerSideProps funkciji, možemo da vratime objekat redirect sa sledećim svojstvima:

* destination: URL stranice za prijavu
* permanent: Da li je preusmerenje trajno ili ne

7. Šta je context.params objekat?

context.params objekat je objekat koji sadrži parametre rute. Možemo da koristimo ovaj objekat da bi pristupili promenljivim segmentima rute.

8. Kako proslediti datos komponenenti stranice u getServerSideProps funkciji?

Da bismo prosledili datos komponenti stranice u getServerSideProps funkciji, možemo da vratimo objekat props. Ovaj objekat će biti prosleđen kao props komponenti stranice.

9. Šta je useRouter huba?

useRouter huba je huba React komponente koja nam omogućava da pristupimo objektu router koji sadrži informacije o trenutnoj ruti.

10. Kako doći do id parametra rute u komponenti stranice?

Da bismo došli do id parametra rute u komponenti stranice, možemo da koristimo router.query.id. Ovo će vratiti id parametar iz objekta query koji je dostupan u objektu router.