Autorisierung und Authentifizierung in TypeScript: vollständiger Leitfaden

Autorisierung und Authentifizierung in TypeScript: von der Theorie zur Praxis

In der modernen Webentwicklung ist die Anwendungssicherheit ein Grundpfeiler. TypeScript, als streng typisierte Erweiterung von JavaScript, bietet leistungsstarke Werkzeuge für den Aufbau zuverlässiger Systeme der Authentifizierung (Überprüfung der Benutzeridentität) und Autorisierung (Überprüfung der Zugriffsrechte). In diesem Artikel werden wir die wichtigsten Konzepte, beliebte Bibliotheken erläutern und ein funktionierendes Beispiel in TypeScript schreiben.

Grundlegende Konzepte: Authentifizierung vs. Autorisierung

Diese Begriffe werden oft verwechselt. Lassen Sie uns klar trennen:

• Authentifizierung (Authentication) — der Prozess der Überprüfung, wer Sie sind. Zum Beispiel die Anmeldung mit Benutzername und Passwort oder über einen Drittanbieterdienst (Google, GitHub).
• Autorisierung (Authorization) — der Prozess der Überprüfung, was Sie tun dürfen. Zum Beispiel der Zugriff auf das Admin-Panel oder die Möglichkeit, Beiträge zu löschen.

In TypeScript werden diese Prozesse durch Middleware (Zwischenverarbeitung) implementiert, die Token oder Sessions vor der Ausführung einer Anfrage überprüft.

Beliebte Bibliotheken für TypeScript

Für die Implementierung von Autorisierung und Authentifizierung in TypeScript-Projekten werden am häufigsten verwendet:

• jsonwebtoken — Arbeit mit JWT (JSON Web Tokens).
• bcrypt — Hashing von Passwörtern.
• passport (mit Typen @types/passport) — flexibles Middleware für Express.
• express-session — Verwaltung von Sessions auf dem Server.
• crypto — integriertes Node.js-Modul für die Arbeit mit Hashes.

Praktisches Beispiel: JWT-Authentifizierung in TypeScript

Betrachten wir die Erstellung einer einfachen REST-API mit Authentifizierung über JWT. Das Beispiel basiert auf Express + TypeScript.

Schritt 1. Installation der Abhängigkeiten

npm install express jsonwebtoken bcrypt dotenvnpm install -D typescript @types/express @types/jsonwebtoken @types/bcrypt ts-node nodemon

Schritt 2. TypeScript-Konfiguration (tsconfig.json)

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  }}

Schritt 3. Erstellung des Middleware für die Authentifizierung

// src/middleware/auth.tsimport { Request, Response, NextFunction } from 'express';import jwt from 'jsonwebtoken';

interface UserPayload {  id: string;  email: string;}

// Erweitern des Request-Interfaces zum Speichern von Benutzerdatendeclare global {  namespace Express {    interface Request {      user?: UserPayload;    }  }}

export const authenticate = (  req: Request,  res: Response,  next: NextFunction): void => {  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith('Bearer ')) {    res.status(401).json({ message: 'Token nicht bereitgestellt' });    return;  }

  const token = authHeader.split(' ')[1];

  try {    const decoded = jwt.verify(      token,      process.env.JWT_SECRET || 'default_secret'    ) as UserPayload;    req.user = decoded;    next();  } catch (error) {    res.status(401).json({ message: 'Ungültiges Token' });  }};

Schritt 4. Middleware für die rollenbasierte Autorisierung

// src/middleware/authorize.tsimport { Request, Response, NextFunction } from 'express';

export const authorize = (...allowedRoles: string[]) => {  return (req: Request, res: Response, next: NextFunction): void => {    // Wir gehen davon aus, dass die Rolle nach der Authentifizierung in req.user gespeichert ist    const userRole = (req as any).user?.role || 'user';

    if (!allowedRoles.includes(userRole)) {      res.status(403).json({ message: 'Zugriff verweigert' });