如何使用 JWT（JSON Web 令牌）在 React 中實現身份驗證

驗證是許多 Web 應用程式的關鍵部分，保護 React 中的路由需要了解令牌（例如 JSON Web 令牌 (JWT)）的工作原理。 JWT 可讓您在用戶端和伺服器之間安全地傳輸訊息，這對於在現代 Web 應用程式中實現使用者驗證特別有用。在本文中，我們將學習如何使用 JWT 在 React 中實現身份驗證。

什麼是智威湯遜？

JSON Web 令牌 (JWT) 是緊湊的 URL 安全令牌，用於表示雙方之間的聲明。 JWT 是單頁應用程式 (SPA) 中身份驗證的熱門選擇，因為它輕量級、無狀態且易於實現。

典型的 JWT 由三個部分組成：
1.標頭： 包含有關令牌的元數據，包括簽章演算法。
2. Payload： 包含您想要傳輸的聲明（資料），例如使用者資訊。
3.簽名： 用於驗證寄件者確實是其所說的人，並確保訊息在此過程中沒有被更改。

在 React 中實作 JWT 身份驗證的步驟

1。後端設定 (Node.js Express JWT)

• 安裝所需的依賴項：express、jsonwebtoken、bcryptjs。
• 設定一個簡單的 Express 伺服器並建立用於登入和受保護資料存取的路由。
• 成功登入後產生 JWT 令牌。 後端程式碼範例（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。前端設定（React JWT）：

• 使用 React 的 useState 和 useEffect 鉤子來管理身份驗證狀態。
• 成功登入後將 JWT 令牌儲存在本機儲存或 cookie 中。
• 使用 JWT 令牌向後端 API 發出經過驗證的請求。 前端程式碼範例（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)}