Next.js je popularan okvir za JavaScript koji omogućava izradu efikasnih i visoko skalabilnih veb aplikacija. On nudi niz funkcija koje pojednostavljuju razvoj dinamičnih aplikacija, uključujući dinamičke putanje i mehanizme za zaštitu ruta. U ovom članku ćemo razmotriti kako iskoristiti ove karakteristike za kreiranje dinamičkih putanja koje su zaštićene procesom autentifikacije korisnika.
Šta su zapravo dinamičke putanje?
Dinamičke putanje su one putanje kod kojih je jedan deo putanje promenljiv. Na primer, umesto da imate statičku putanju poput /artikli/1, možete koristiti dinamičku putanju kao što je /artikli/[id], gde [id] predstavlja promenljivu. Ovo vam omogućava da generišete jedinstvene putanje za svaki artikal bez potrebe da definišete svaku pojedinačnu putanju ručno.
Šta predstavljaju zaštitnici ruta (Route Guards)?
Zaštitnici ruta su funkcije koje se aktiviraju pre učitavanja komponenti neke putanje. Oni omogućavaju proveru da li je korisnik prijavljen, ima li odgovarajuće dozvole ili obavljanje drugih provera pre nego što se komponente učitaju. Ovo je izuzetno korisno za zaštitu osetljivih ruta od neovlašćenog pristupa.
Postupak kreiranja dinamičkih putanja u Next.js-u
Za kreiranje dinamičkih putanja u Next.js-u koristi se sintaksa uglastih zagrada unutar naziva fajlova stranica. Na primer, za kreiranje dinamičke putanje za pojedinačni artikal, koristili biste sledeći kod:
import { useRouter } from 'next/router';
export default function Artikal() {
const router = useRouter();
const { id } = router.query;
// ... kod za prikaz artikla sa id-om `id`
}
Ovaj kod generiše dinamičku putanju na /artikli/[id], gde [id] predstavlja promenljivu. Kada se ova putanja učita, Next.js će popuniti objekat query u useRouter hook-u sa parovima ključ-vrednost parametara putanje. U ovom primeru, router.query.id će sadržati ID artikla koji se prikazuje.
Zaštita dinamičkih putanja autentifikacijom korisnika
Kako biste zaštitili dinamičke putanje autentifikacijom korisnika, možete koristiti zaštitnike ruta. Oni se definišu kao funkcije koje se pozivaju pre učitavanja komponente neke putanje. U ovim funkcijama možete proveriti da li je korisnik prijavljen i, ako nije, preusmeriti ga na stranicu za prijavu.
Za kreiranje zaštitnika rute u Next.js-u koristi se funkcija getServerSideProps. Ova funkcija se izvršava na serveru pre učitavanja komponente putanje. Unutar nje, možete proveriti status prijave korisnika. Ukoliko korisnik nije prijavljen, možete vratiti preusmerenje na stranicu za prijavu.
Primer zaštite dinamičke putanje za pojedinačne članke:
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 artikla sa ID-om iz `context.params.id`
return {
props: {
// Prosleđivanje podataka artikla komponenti stranice
},
};
}
Zaključak
Dinamičke putanje i zaštitnici ruta su moćne funkcije Next.js-a koje omogućavaju kreiranje dinamičnih i sigurnih veb aplikacija. Uz pomoć dinamičkih putanja, možete definisati fleksibilne putanje koje obrađuju promenljive parametre. Korišćenjem zaštitnika ruta, možete zaštititi ove putanje od neovlašćenog pristupa. U ovom članku ste naučili kako koristiti ove karakteristike za kreiranje dinamičkih putanja koje su zaštićene autentifikacijom korisnika.
Često postavljana pitanja
1. Šta su zaštitnici ruta?
Zaštitnici ruta su funkcije koje se pozivaju pre učitavanja komponente putanje. Oni omogućavaju proveru da li je korisnik prijavljen, ima li odgovarajuće dozvole ili obavljanje drugih provera pre nego što se komponente učitaju.
2. Kako se kreira dinamička putanja u Next.js-u?
Za kreiranje dinamičke putanje u Next.js-u koristi se sintaksa uglastih zagrada unutar naziva fajlova stranica. Na primer, za kreiranje dinamičke putanje za pojedinačni artikal, koristili biste sledeći kod:
import { useRouter } from 'next/router';
export default function Artikal() {
const router = useRouter();
const { id } = router.query;
// ... kod za prikaz artikla sa id-om `id`
}
3. Kako zaštititi dinamičku putanju autentifikacijom korisnika?
Da biste zaštitili dinamičke putanje autentifikacijom korisnika, možete koristiti zaštitnike ruta. Oni se definišu kao funkcije koje se pozivaju pre učitavanja komponente putanje. U tim funkcijama možete proveriti da li je korisnik prijavljen i, ako nije, preusmeriti ga na stranicu za prijavu.
4. Šta je funkcija getServerSideProps?
Funkcija getServerSideProps se izvršava na serveru pre učitavanja komponente putanje. Ona omogućava preuzimanje podataka na serveru i njihovo prosleđivanje komponenti putanje.
5. Kako proveriti da li je korisnik prijavljen unutar funkcije getServerSideProps?
Za proveru da li je korisnik prijavljen unutar funkcije getServerSideProps, možete koristiti svojstvo req.isAuthenticated. Ovo svojstvo je dostupno ukoliko koristite paket za autentifikaciju, kao što je passport.
6. Kako preusmeriti korisnika na stranicu za prijavu u funkciji getServerSideProps?
Za preusmeravanje korisnika na stranicu za prijavu unutar funkcije getServerSideProps, možete vratiti objekat redirect sa sledećim svojstvima:
destination: URL stranice za prijavupermanent: Indikator da li je preusmerenje trajno ili ne
7. Šta je objekat context.params?
Objekat context.params sadrži parametre putanje. Možete koristiti ovaj objekat za pristup promenljivim segmentima putanje.
8. Kako proslediti podatke komponenti stranice u funkciji getServerSideProps?
Za prosleđivanje podataka komponenti stranice u funkciji getServerSideProps, možete vratiti objekat props. Ovaj objekat će biti prosleđen kao props komponenti stranice.
9. Šta je useRouter hook?
useRouter je hook React komponente koji omogućava pristup objektu router, koji sadrži informacije o trenutnoj putanji.
10. Kako pristupiti id parametru putanje u komponenti stranice?
Za pristup id parametru putanje u komponenti stranice, možete koristiti router.query.id. Ovo će vratiti id parametar iz objekta query, koji je dostupan u objektu router.