Sessionshantering och JWT:er
Förstå hur sessioner hanteras och hur JSON Web Tokens (JWT:er) används för säker användarautentisering.
Sessionshantering och JWT:er är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.
Vad är sessioner?
På webben är en "session" ett sätt för en server att komma ihåg en användare över flera förfrågningar. Tänk på det som ett samtal med korttidsminne.
Eftersom HTTP-förfrågningar är tillståndslösa (varje förfrågan är fristående) hjälper sessioner till att bevara information om vem du är och vad du gör.
Varför behöver vi sessioner?
Föreställ dig att du loggar in i en nätbutik. Utan en session skulle servern glömma att du är inloggad varje gång du klickar på en ny produkt eller lägger till en vara i varukorgen!
Sessioner kopplar samman relaterade förfrågningar från samma användare, så att applikationen kan ge en personlig och sammanhängande upplevelse.
Traditionella sessioner och cookies
Traditionellt innebär sessioner att servern skapar ett unikt "session-ID" för en användare efter inloggningen. Detta ID lagras på servern.
Servern skickar sedan session-ID:t till webbläsaren, vanligtvis i en cookie. Webbläsaren skickar automatiskt tillbaka denna cookie med varje efterföljande förfrågan, så att servern kan identifiera användaren.
Möt JSON Web Tokens (JWT)
JSON Web Tokens (uttalas "jot") är ett modernt alternativ till traditionella sessioner. De är självständiga, kompakta och digitalt signerade informationsdelar.
I stället för att servern lagrar sessionsdata lagrar JWT:er användarspecifik information direkt i själva tokenen.
JWT-struktur: Header
En JWT består av tre delar, separerade med punkter: Header, Payload och Signature.
Header innehåller vanligtvis två fält:
alg: Algoritmen som används för att signera tokenen (till exempel HMAC SHA256 eller RSA).typ: Typen av token, vanligtvis "JWT".
{
"alg": "HS256",
"typ": "JWT"
}JWT-struktur: Payload
Payload innehåller "claims" – påståenden om en entitet (till exempel en användare) samt ytterligare data. Claims kan vara:
- Registered Claims: Standardclaims som
iss(utfärdare),sub(subjekt) ochexp(utgångstid). - Public Claims: Anpassade claims som du definierar, men registrerar i IANA JWT Registry.
- Private Claims: Anpassade claims som parter har kommit överens om och som inte är offentligt registrerade.
{
"sub": "1234567890",
"name": "Jane Doe",
"admin": true,
"iat": 1516239022,
"exp": 1516242622
}JWT-struktur: Signature
Signature skapas genom att den kodade Header-delen, den kodade Payload-delen, en hemlig nyckel och algoritmen som anges i headern tas och signeras.
Denna signatur är avgörande! Den verifierar att JWT:ns avsändare är den som den utger sig för att vara och att meddelandet inte har manipulerats på vägen.
Så fungerar JWT:er i praktiken
Här är ett typiskt flöde:
- Användaren loggar in med sina autentiseringsuppgifter.
- Servern verifierar uppgifterna och skapar en JWT.
- Servern skickar tillbaka JWT:n till klienten.
- Klienten lagrar JWT:n (till exempel i local storage eller en cookie).
- Vid efterföljande förfrågningar skickar klienten JWT:n (vanligtvis i en
Authorization-header). - Servern verifierar JWT:ns signatur och giltighetstid innan förfrågan behandlas.
Fördelar och nackdelar med JWT
Fördelar:
- Tilståndslös: Servrar behöver inte lagra sessionsdata, vilket förbättrar skalbarheten.
- Distribuerad: Tokenar kan verifieras av alla servrar som har den hemliga nyckeln.
- Mobilvänlig: Enkel att använda med olika klienter (webb, mobilappar).
Att tänka på:
- Lagring: Var tokenar ska lagras säkert på klientsidan.
- Återkallande: Det är svårare att återkalla en aktiv token innan den löper ut.
- Storlek: Kan vara större än ett enkelt session-ID.
Snabbtest om JWT:er
Testa vad du har förstått om JSON Web Tokens!
Sammanfattning av sessioner och JWT
Bra jobbat! I den här lektionen har du lärt dig om:
- Syftet med webbsessioner för att bevara användarens kontext.
- Hur traditionella sessioner använder lagring på serversidan och cookies.
- JSON Web Tokens (JWT:er), deras struktur (Header, Payload, Signature) och funktion.
- Arbetsflödet för autentisering med JWT:er.
- Viktiga fördelar och saker att tänka på när du väljer JWT:er för dina applikationer.
Härnäst går vi igenom hur du skyddar routes och API-endpoints med Next.js Middleware!
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Sessionshantering och JWT:er” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15: fullstack-webbappar, inklusive ”Sessionshantering och JWT:er”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.
Vad lär jag mig i ”Sessionshantering och JWT:er”?
Förstå hur sessioner hanteras och hur JSON Web Tokens (JWT:er) används för säker användarautentisering. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?
Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Sessionshantering och JWT:er”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?
Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Integrera NextAuth.js
- Sessionshantering och JWT:er
- Middleware och åtkomstkontroll
- Rollbaserad åtkomstkontroll (RBAC)