Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-01 15:18:02
Original
567 Leute haben es durchsucht

Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em 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
Nach dem Login kopieren

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"]
}
Nach dem Login kopieren

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}`));
Nach dem Login kopieren

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;
Nach dem Login kopieren

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();
    });
};
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage