JWT(JSON 웹 토큰)를 사용하여 React에서 인증을 구현하는 방법

인증은 많은 웹 애플리케이션에서 중요한 부분이며, React에서 경로를 보호하려면 JWT(JSON Web Tokens)와 같은 토큰이 작동하는 방식을 이해해야 합니다. JWT를 사용하면 클라이언트와 서버 간에 정보를 안전하게 전송할 수 있으며, 이는 최신 웹 애플리케이션에서 사용자 인증을 구현하는 데 특히 유용합니다. 이번 글에서는 JWT를 사용하여 React에서 인증을 구현하는 방법을 알아보겠습니다.

JWT란 무엇입니까?

JWT(JSON 웹 토큰)는 두 당사자 간의 소유권을 나타내는 데 사용되는 압축된 URL 안전 토큰입니다. JWT는 가볍고 상태 비저장이며 구현이 쉽기 때문에 단일 페이지 애플리케이션(SPA) 인증에 널리 사용됩니다.

일반적인 JWT는 세 부분으로 구성됩니다.
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 토큰을 로컬 저장소나 쿠키에 저장하세요.
• 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)}

); }

로그인 후 복사

3. 경로 보호:

• React Router를 사용하여 인증이 필요한 비공개 경로를 생성하세요.
• 보호된 경로에 대한 액세스를 허용하기 전에 JWT 토큰이 존재하는지 확인하세요. 예:

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

결론
React에서 JWT 인증을 구현하는 것은 보안 백엔드 생성, 성공적인 로그인 시 토큰 생성, React에서 인증 상태 관리를 포함하는 간단한 프로세스입니다. JWT는 최신 웹 애플리케이션에서 인증을 관리하는 확장 가능하고 상태 비저장 방식을 제공합니다.

위 내용은 JWT(JSON 웹 토큰)를 사용하여 React에서 인증을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!