JWT (JSON Web トークン) を使用して React に認証を実装する方法-jsチュートリアル-php.cn

JWT (JSON Web トークン) を使用して React に認証を実装する方法

DDD

リリース： 2025-01-13 14:26:43

オリジナル

544 人が閲覧しました

How to Implement Authentication in React Using JWT (JSON Web Tokens)

認証は多くの Web アプリケーションにとって重要な部分であり、React でルートを保護するには、JSON Web Token (JWT) などのトークンがどのように機能するかを理解する必要があります。 JWT を使用すると、クライアントとサーバー間で情報を安全に送信できます。これは、最新の Web アプリケーションにユーザー認証を実装する場合に特に役立ちます。この記事では、JWT を使用して React に認証を実装する方法を学びます。

JWTとは何ですか?

JSON Web トークン (JWT) は、2 者間のクレームを表すために使用されるコンパクトで URL セーフなトークンです。 JWT は軽量でステートレスで実装が簡単であるため、シングルページアプリケーション (SPA) の認証によく選ばれています。

一般的な JWT は 3 つの部分で構成されます。
1.ヘッダー: 署名アルゴリズムを含む、トークンに関するメタデータが含まれます。
2.ペイロード: ユーザー情報など、送信するクレーム (データ) が含まれます。
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)}

); }

ログイン後にコピー

結論
React での JWT 認証の実装は、安全なバックエンドの作成、ログイン成功時のトークンの生成、React での認証状態の管理を含む簡単なプロセスです。 JWT は、最新の Web アプリケーションで認証を管理するスケーラブルでステートレスな方法を提供します。

以上がJWT (JSON Web トークン) を使用して React に認証を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。