So implementieren Sie die Authentifizierung in React mithilfe von JWT (JSON Web Tokens)

Authentifizierung ist ein wichtiger Bestandteil vieler Webanwendungen, und das Sichern von Routen in React erfordert ein Verständnis dafür, wie Token wie JSON Web Tokens (JWT) funktionieren. Mit JWT können Sie Informationen sicher zwischen Client und Server übertragen, was besonders für die Implementierung der Benutzerauthentifizierung in modernen Webanwendungen nützlich ist. In diesem Artikel erfahren Sie, wie Sie die Authentifizierung in React mithilfe von JWT implementieren.

Was ist JWT?

JSON Web Tokens (JWT) sind kompakte, URL-sichere Token, die zur Darstellung von Ansprüchen zwischen zwei Parteien verwendet werden. JWT ist eine beliebte Wahl für die Authentifizierung in Single-Page-Anwendungen (SPAs), da es leichtgewichtig, zustandslos und einfach zu implementieren ist.

Ein typisches JWT besteht aus drei Teilen:
1. Header: Enthält Metadaten zum Token, einschließlich des Signaturalgorithmus.
2. Nutzlast: Enthält die Ansprüche (Daten), die Sie übermitteln möchten, wie z. B. Benutzerinformationen.
3. Signatur:Wird verwendet, um zu überprüfen, ob der Absender der ist, von dem er behauptet, dass er es ist, und um sicherzustellen, dass die Nachricht unterwegs nicht geändert wurde.

Schritte zum Implementieren der JWT-Authentifizierung in React

1. Backend-Setup (Node.js Express JWT)

• Installieren Sie die erforderlichen Abhängigkeiten: Express, Jsonwebtoken, Bcryptjs.
• Richten Sie einen einfachen Express-Server ein und erstellen Sie Routen für die Anmeldung und den geschützten Datenzugriff.
• Generieren Sie nach erfolgreicher Anmeldung ein JWT-Token. Beispiel-Backend-Code (Node.js Express JWT):

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const app = express();
const users = [{ username: 'test', password: 'a$...' }]; // Example user data

app.use(express.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // Verify user credentials
  const user = users.find(u => u.username === username);
  if (user && bcrypt.compareSync(password, user.password)) {
    const token = jwt.sign({ username: user.username }, 'secretKey', { expiresIn: '1h' });
    return res.json({ token });
  } else {
    return res.status(401).send('Invalid credentials');
  }
});

app.listen(5000, () => console.log('Server running on port 5000'));

2. Frontend-Setup (React JWT):

• Verwenden Sie die useState- und useEffect-Hooks von React, um den Authentifizierungsstatus zu verwalten.
• Speichern Sie das JWT-Token nach erfolgreicher Anmeldung im lokalen Speicher oder in Cookies.
• Verwenden Sie das JWT-Token, um authentifizierte Anfragen an die Backend-API zu stellen. Beispiel-Frontend-Code (React JWT):

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

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/login', { username, password });
      localStorage.setItem('token', response.data.token); // Store the JWT
      alert('Login successful');
    } catch (error) {
      alert('Login failed');
    }
  };

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

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('http://localhost:5000/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(response => setData(response.data))
      .catch(error => console.error(error));
    }
  }, []);

  return (
    <div>
      <h1>Protected Dashboard</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); }

Nach dem Login kopieren

3. Routen schützen:

• Verwenden Sie React Router, um private Routen zu erstellen, die eine Authentifizierung erfordern.
• Überprüfen Sie, ob das JWT-Token vorhanden ist, bevor Sie den Zugriff auf geschützte Routen zulassen. Beispiel:

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

Fazit
Die Implementierung der JWT-Authentifizierung in React ist ein unkomplizierter Prozess, der die Erstellung eines sicheren Backends, die Generierung eines Tokens bei erfolgreicher Anmeldung und die Verwaltung des Authentifizierungsstatus in React umfasst. JWT bietet eine skalierbare und zustandslose Möglichkeit zur Verwaltung der Authentifizierung in modernen Webanwendungen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Authentifizierung in React mithilfe von JWT (JSON Web Tokens). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!