Authentifizierung mit JWT im Frontend und Backend: Implementierung mit Node.js und ReactJS (in TypeScript)

Authentifizierung über JSON Web Token (JWT) wird häufig verwendet, um APIs zu sichern und sicherzustellen, dass nur autorisierte Benutzer auf bestimmte Daten zugreifen können. In diesem Beitrag zeigen wir Ihnen, wie Sie JWT im Backend mit Node.js und im Frontend mit ReactJS mithilfe von TypeScript konfigurieren, von der Token-Generierung bis zur sicheren Benutzersitzungsverwaltung.

Konfigurieren des Backends mit Node.js

Erstellen wir zunächst eine API mit Node.js, Express und TypeScript, die JWT-Token generiert und validiert.

Schritt 1: Konfigurieren der Umgebung

Erstellen Sie ein neues Projekt und installieren Sie die Hauptabhängigkeiten:

npm init -y
npm install express jsonwebtoken bcryptjs dotenv
npm install -D typescript @types/node @types/express @types/jsonwebtoken @types/bcryptjs ts-node

Erstellen Sie eine tsconfig.json-Datei für die TypeScript-Konfiguration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Schritt 2: Strukturierung des Backends

Erstellen Sie eine einfache Struktur, beginnend mit einer server.ts-Datei und einem Routenordner, um Authentifizierungsrouten zu organisieren.

server.ts

import express, { Application } from 'express';
import dotenv from 'dotenv';
import authRoutes from './routes/authRoutes';

dotenv.config();

const app: Application = express();
app.use(express.json());

app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));

Routen/authRoutes.ts

Erstellen Sie eine Datei für Authentifizierungsrouten. Hier haben wir eine Anmelderoute, die den Benutzer validiert und das JWT-Token zurückgibt.

import express, { Request, Response } from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';

const router = express.Router();

// Simulação de banco de dados
const users = [{ username: 'usuario', password: 'senha123' }];

router.post('/login', async (req: Request, res: Response) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user || !(await bcrypt.compare(password, user.password))) {
        return res.status(401).json({ message: 'Credenciais inválidas' });
    }

    const token = jwt.sign({ username }, process.env.JWT_SECRET as string, { expiresIn: '1h' });
    res.json({ token });
});

export default router;

Schritt 3: Routen mit Middleware sichern

Fügen Sie Middleware hinzu, um Routen zu schützen, die eine Authentifizierung erfordern.

middleware/authMiddleware.ts

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

interface JwtPayload {
    username: string;
}

export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => {
    const token = req.headers['authorization'];
    if (!token) {
        res.status(403).json({ message: 'Token não fornecido' });
        return;
    }

    jwt.verify(token, process.env.JWT_SECRET as string, (err, decoded) => {
        if (err) {
            res.status(401).json({ message: 'Token inválido' });
            return;
        }
        req.user = decoded as JwtPayload;
        next();
    });
};

Konfigurieren des Frontends mit ReactJS

Im Frontend verwenden wir React für die Authentifizierung, das Senden von Anmeldeinformationen und das Speichern des JWT-Tokens.

Schritt 1: Konfigurieren der Anmeldeschnittstelle

Erstellen Sie zunächst eine Login.tsx-Komponente, um Benutzeranmeldeinformationen zu erfassen und eine Anmeldeanforderung an das Backend zu senden.

Login.tsx

import React, { useState } from 'react';
import axios from 'axios';

const Login: React.FC = () => {
    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [error, setError] = useState<string>('');

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const response = await axios.post('/api/auth/login', { username, password });
            localStorage.setItem('token', response.data.token);
            window.location.href = '/dashboard';
        } catch (err) {
            setError('Credenciais inválidas');
        }
    };

    return (
        <form onSubmit={handleLogin}>
            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button type="submit">Login</button>
            {error && <p>{error}</p>}
        </form>
    );
};

export default Login;

Schritt 2: Routen im Frontend schützen

Erstellen Sie eine Funktion für geschützte Routen und verwenden Sie das JWT-Token, um auf die API zuzugreifen.

PrivateRoute.tsx

import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';

interface PrivateRouteProps extends RouteProps {
    component: React.ComponentType<any>;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) =>
            localStorage.getItem('token') ? (
                <Component {...props} />
            ) : (
                <Redirect to="/login" />
            )
        }
    />
);

export default PrivateRoute;

Schritt 3: Senden Sie das JWT-Token in Anfragen

Konfigurieren Sie Axios so, dass das JWT-Token automatisch in geschützte Anfragen einbezogen wird.

axiosConfig.ts

import axios from 'axios';

const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = token;
}

export default axios;

Schritt 4: Beispiel für die Verwendung mit einer geschützten Route

Erstellen Sie nun ein Beispiel für eine geschützte Seite, für deren Zugriff das Token erforderlich ist.

Dashboard.tsx

import React, { useEffect, useState } from 'react';
import axios from './axiosConfig';

const Dashboard: React.FC = () => {
    const [data, setData] = useState<string>('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/protected');
                setData(response.data.message);
            } catch (error) {
                console.error(error);
            }
        };
        fetchData();
    }, []);

    return <h1>{data || 'Carregando...'}</h1>;
};

export default Dashboard;

Abschluss

Mit diesen Schritten richten wir die vollständige JWT-Authentifizierung in TypeScript für ein Projekt ein, das Node.js im Backend und React im Frontend verwendet. Dieser Ansatz ist äußerst sicher, effizient und wird häufig zum Schutz moderner Anwendungen eingesetzt.

Das obige ist der detaillierte Inhalt vonAuthentifizierung mit JWT im Frontend und Backend: Implementierung mit Node.js und ReactJS (in TypeScript). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!