Cara Melaksanakan Pengesahan dalam React Menggunakan JWT (Token Web JSON)

Pengesahan ialah bahagian penting dalam banyak aplikasi web dan mengamankan laluan dalam React memerlukan pemahaman tentang cara token, seperti JSON Web Token (JWT), berfungsi. JWT membolehkan anda menghantar maklumat dengan selamat antara klien dan pelayan, yang amat berguna untuk melaksanakan pengesahan pengguna dalam aplikasi web moden. Dalam artikel ini, kita akan belajar cara melaksanakan pengesahan dalam React menggunakan JWT.

Apa itu JWT?

Token Web JSON (JWT) ialah token padat dan selamat URL yang digunakan untuk mewakili tuntutan antara dua pihak. JWT ialah pilihan popular untuk pengesahan dalam aplikasi satu halaman (SPA) kerana ia ringan, tanpa negara dan mudah dilaksanakan.

JWT biasa terdiri daripada tiga bahagian:
1. Tajuk: Mengandungi metadata tentang token, termasuk algoritma tandatangan.
2. Muatan: Mengandungi tuntutan (data) yang anda ingin hantar, seperti maklumat pengguna.
3. Tandatangan: Digunakan untuk mengesahkan bahawa pengirim adalah siapa yang dikatakannya dan untuk memastikan bahawa mesej itu tidak diubah sepanjang perjalanan.

Langkah-langkah untuk Melaksanakan Pengesahan JWT dalam React

1. Persediaan Bahagian Belakang (Node.js Express JWT)

• Pasang kebergantungan yang diperlukan: express, jsonwebtoken, bcryptjs.
• Sediakan pelayan Express yang ringkas dan buat laluan untuk log masuk dan akses data yang dilindungi.
• Jana token JWT apabila berjaya log masuk. Contoh kod hujung belakang (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. Persediaan Bahagian Hadapan (React JWT):

• Gunakan cangkuk useState dan useEffect React untuk mengurus keadaan pengesahan.
• Simpan token JWT dalam storan atau kuki tempatan selepas berjaya log masuk.
• Gunakan token JWT untuk membuat permintaan yang disahkan kepada API bahagian belakang. Contoh kod bahagian hadapan (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)}

); }

Salin selepas log masuk

3. Melindungi Laluan:

• Gunakan Penghala Reaksi untuk mencipta laluan peribadi yang memerlukan pengesahan.
• Semak sama ada token JWT wujud sebelum membenarkan akses kepada laluan yang dilindungi. Contoh:

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

Kesimpulan
Melaksanakan pengesahan JWT dalam React ialah proses mudah yang melibatkan penciptaan bahagian belakang yang selamat, menjana token pada log masuk yang berjaya dan mengurus keadaan pengesahan dalam React. JWT menyediakan cara berskala dan tanpa negara untuk mengurus pengesahan dalam aplikasi web moden.

Atas ialah kandungan terperinci Cara Melaksanakan Pengesahan dalam React Menggunakan JWT (Token Web JSON). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!