Autentiseringsmiddleware
Implementera autentiseringskontroller med tRPC-middleware för att skydda era API-procedurer.
Autentiseringsmiddleware är en gratis lektion i Typsäkra API:er från frontend till backend med tRPC 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 Typsäkra API:er från frontend till backend med tRPC, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.
Skydda ditt API med autentisering
Välkommen till den här lektionen om tRPC:s middleware för autentisering! Det är viktigt att skydda ditt API, så att endast behöriga användare kan komma åt känsliga data eller utföra kritiska åtgärder.
Middleware i tRPC erbjuder ett elegant sätt att centralisera dessa säkerhetskontroller innan någon procedur körs.
Varför middleware för autentisering?
Att använda middleware för autentisering ger flera viktiga fördelar:
- Centraliserad logik: Definiera autentiseringsregler en gång och tillämpa dem överallt.
- Mindre duplicering: Undvik att skriva samma säkerhetskontroller i varje API-procedur.
- Ren kod: Håll affärslogiken åtskild från säkerhetsrelaterade frågor.
- Konsekvens: Säkerställ att alla skyddade slutpunkter följer samma säkerhetsstandarder.
Grunderna i autentisering
Innan vi implementerar detta repeterar vi kort några vanliga autentiseringsmetoder:
- Token: Till exempel JWT:er (JSON Web Tokens) eller API-nycklar, som vanligtvis skickas i ett
Authorization-huvud. - Sessioner: Hanteras ofta med cookies, där servern lagrar sessionsdata och klienten skickar ett sessions-ID.
Vår middleware ansvarar för att validera dessa autentiseringsuppgifter.
Kontext för användardata
Kom ihåg att tRPC:s kontext är ett objekt som är tillgängligt för alla procedurer och innehåller begärandespecifika data. För autentisering innebär det att funktionen createContext (från en tidigare lektion) bör tolka inkommande autentiseringsinformation, till exempel från huvuden, och fylla kontexten med användardata om sådan finns.
Vår middleware läser sedan dessa användardata från kontexten.
Bygga middleware för autentisering
Det är i tRPC:s funktion t.middleware() som magin sker. Den tar en asynkron funktion som tar emot ett objekt med ctx (kontexten) och next (en funktion som anropar nästa middleware eller själva proceduren).
Där inne kontrollerar du autentiseringen. Om den lyckas anropar du next(). Om inte kastar du ett TRPCError.
Enkel middleware för autentisering
Här är ett körbart TypeScript-exempel som simulerar en enkel middleware för autentisering. Den kontrollerar om det finns ett user-objekt i kontexten.
class TRPCError extends Error {
code: string;
constructor(opts: { code: string }) {
super(`TRPCError: ${opts.code}`);
this.code = opts.code;
}
}
type MockContext = { user?: { id: string; name: string } };
type MiddlewareFn = (opts: { ctx: MockContext; next: Function }) => Promise<any>;
const isAuthenticated: MiddlewareFn = async ({ ctx, next }) => {
if (!ctx.user) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
return next({
ctx: {
...ctx,
user: ctx.user,
},
});
};
async function runMiddlewareDemo() {
console.log("--- Test with authenticated user ---");
try {
await isAuthenticated({
ctx: { user: { id: "123", name: "Alice" } },
next: async (opts: { ctx: MockContext }) => {
console.log("Middleware passed. User:", opts.ctx.user?.name);
return "Success";
}
});
} catch (error) {
console.error("Error:", error instanceof TRPCError ? error.code : String(error));
}
console.log("\n--- Test with unauthenticated user ---");
try {
await isAuthenticated({
ctx: {}, // No user in context
next: async (opts: { ctx: MockContext }) => {
console.log("Middleware passed (should not happen)");
return "Success";
}
});
} catch (error) {
console.error("Error:", error instanceof TRPCError ? error.code : String(error));
}
}
runMiddlewareDemo();Tillämpa middleware på procedurer
När middleware har definierats kan du tillämpa den med metoden .use(). Det kan göras på enskilda procedurer eller på hela routrar för att skydda flera procedurer samtidigt.
Middleware kan också länkas samman, så att du kan kombinera flera kontroller, till exempel autentisering följt av behörighetskontroll.
Exempel på en skyddad fråga
Så här kan du tillämpa middleware-komponenten isAuthenticated på en specifik frågeprocedur. ctx.user garanteras finnas i proceduren om middleware-kontrollen godkänns.
import { t } from './trpc'; // Your tRPC instance
import { isAuthenticated } from './middleware'; // Your auth middleware
// Imagine 'z' is imported for input validation from Zod
// import { z } from 'zod';
const appRouter = t.router({
publicGreeting: t.procedure
.query(() => {
return "Hello, stranger!";
}),
protectedGreeting: t.procedure
.use(isAuthenticated) // Apply the middleware here
.query(({ ctx }) => {
// ctx.user is guaranteed to exist here due to middleware
return `Welcome, ${ctx.user.name}! You are authenticated.`;
}),
});
// This is a conceptual snippet and not runnable standalone.Hantera obehörig åtkomst
När middleware upptäcker en oautentiserad begäran och kastar ett TRPCError, till exempel med code: 'UNAUTHORIZED', fångar tRPC automatiskt felet.
Därefter skickas ett standardiserat felsvar till klienten, så att din frontend-applikation kan hantera den obehöriga åtkomsten på ett smidigt sätt, kanske genom att omdirigera användaren till en inloggningssida.
Testa dina kunskaper om autentiserings-middleware
Du har en middleware-komponent som heter isAdmin. Du vill skydda alla procedurer i en adminRouter, så att endast administratörer kan komma åt dem. Vilket är det korrekta sättet att tillämpa middleware-komponenten?
Sammanfattning: middleware för autentisering
Du har lärt dig att implementera autentiseringskontroller med tRPC-middleware!
- Middleware för autentisering centraliserar säkerhetslogiken.
- Den använder tRPC:s kontext för att komma åt användarinformation.
- Du definierar den med
t.middleware(). - Du tillämpar den på procedurer eller hela routrar med
.use(). TRPCErrorsäkerställer korrekt felhantering för obehöriga begäranden.
Härnäst får du utforska hur du bygger anpassade middleware-kedjor för mer komplexa scenarier!
Lär dig Typsäkra API:er från frontend till backend med tRPC 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
- 10
- Lektioner
- 40
Vanliga frågor
Är lektionen ”Autentiseringsmiddleware” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Typsäkra API:er från frontend till backend med tRPC, inklusive ”Autentiseringsmiddleware”, 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 Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.
Vad lär jag mig i ”Autentiseringsmiddleware”?
Implementera autentiseringskontroller med tRPC-middleware för att skydda era API-procedurer. Ni övar på Typsäkra API:er från frontend till backend med tRPC 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 Typsäkra API:er från frontend till backend med tRPC?
Du behöver inga förkunskaper. Utbildningen i Typsäkra API:er från frontend till backend med tRPC 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 ”Autentiseringsmiddleware”?
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 Typsäkra API:er från frontend till backend med tRPC-lektionen?
Ja. Varje Typsäkra API:er från frontend till backend med tRPC-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
- Skapa tRPC-context
- Autentiseringsmiddleware
- Anpassade middlewarekedjor
- Middleware för loggning och prestandamätning