프런트엔드에서 React.js를 사용하고 백엔드에서 Express.js를 사용하여 인증 시스템을 만들려면 다음을 구현해야 합니다.

• 프런트엔드(React.js with Pulsy): 로그인 및 로그아웃을 처리하고, 사용자 인증 상태를 유지하며, 토큰을 유지합니다.
• 백엔드(Express.js): 인증 엔드포인트(예: 로그인, 로그아웃, 사용자 확인)를 제공합니다.

1단계: 백엔드(Express.js) 설정

사용자 인증 및 토큰 생성을 처리하는 백엔드부터 시작해 보겠습니다.

필수 패키지 설치

npm install express bcryptjs jsonwebtoken cors

백엔드 코드(Express.js)

인증 논리를 처리하기 위해 authController.js 파일을 만듭니다.

// authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// Mock user data (in production, you would use a real database)
const users = [
  {
    id: 1,
    username: 'john',
    password: '$2a$10$O1s8iLKRLPbPqhc1uTquLO.xODTC1U/Z8xGoEDU6/Dc0PAQ3MkCKy', // hashed password for 'password123'
  },
];

// JWT Secret
const JWT_SECRET = 'supersecretkey';

exports.login = (req, res) => {
  const { username, password } = req.body;

  const user = users.find((u) => u.username === username);

  if (!user) {
    return res.status(401).json({ error: 'Invalid credentials' });
  }

  bcrypt.compare(password, user.password, (err, isMatch) => {
    if (isMatch) {
      // Create a token
      const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: '1h' });
      return res.json({ token });
    } else {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
  });
};

exports.validateToken = (req, res) => {
  const token = req.header('Authorization').replace('Bearer ', '');

  if (!token) {
    return res.status(401).json({ error: 'No token provided' });
  }

  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    res.json({ user: { id: decoded.id, username: decoded.username } });
  } catch (err) {
    res.status(401).json({ error: 'Invalid token' });
  }
};

다음으로 Express 설정을 위한 기본 server.js 파일을 만듭니다.

// server.js
const express = require('express');
const cors = require('cors');
const { login, validateToken } = require('./authController');

const app = express();
app.use(express.json());
app.use(cors());

// Authentication routes
app.post('/api/login', login);
app.get('/api/validate', validateToken);

// Start the server
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• POST /api/login: 사용자를 인증하고 JWT 토큰을 반환합니다.
• GET /api/validate: 토큰을 검증하고 사용자 정보를 반환합니다.

2단계: 프런트엔드(Pulsy를 사용한 React.js)

이제 인증 상태를 처리하기 위해 React.js 및 Pulsy를 사용하여 프런트엔드를 설정해 보겠습니다.

필수 패키지 설치

npm install axios pulsy

펄스 스토어 설정

인증 상태를 전 세계적으로 관리하기 위해 Pulsy 스토어를 만들 예정입니다.

// authStore.js
import { createStore, addMiddleware } from 'pulsy';
import axios from 'axios';

// Create a store to hold the user and token
createStore('auth', {
  user: null,
  token: null,
}, { persist: true }); // Persist the auth state in localStorage

// Middleware to add Authorization header for authenticated requests
addMiddleware('auth', (nextValue, prevValue, storeName) => {
  if (nextValue.token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${nextValue.token}`;
  } else {
    delete axios.defaults.headers.common['Authorization'];
  }
  return nextValue;
});

이 저장소는 인증 상태(사용자 및 토큰)를 유지하고 인증된 요청에 대한 Authorization 헤더를 자동으로 적용합니다.

인증 기능

로그인 및 유효성 검사 요청을 처리하는 도우미 함수를 만듭니다.

// authService.js
import { setStoreValue } from 'pulsy';
import axios from 'axios';

const API_URL = 'http://localhost:5000/api';

export const login = async (username, password) => {
  try {
    const response = await axios.post(`${API_URL}/login`, { username, password });
    const { token } = response.data;

    // Set token and user info in Pulsy store
    setStoreValue('auth', { token, user: { username } });

    return true;
  } catch (error) {
    console.error('Login failed', error);
    return false;
  }
};

export const validateToken = async () => {
  try {
    const response = await axios.get(`${API_URL}/validate`);
    const user = response.data.user;

    // Update the store with the user info
    setStoreValue('auth', { user, token: localStorage.getItem('auth_token') });
    return true;
  } catch (error) {
    console.error('Token validation failed', error);
    return false;
  }
};

export const logout = () => {
  setStoreValue('auth', { user: null, token: null });
  localStorage.removeItem('pulsy_auth');
};

3단계: 인증 구성 요소 생성

이제 로그인 및 인증된 보기를 위한 React 구성 요소를 만들어 보겠습니다.

로그인 구성요소

// Login.js
import React, { useState } from 'react';
import { login } from './authService';

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

  const handleLogin = async (e) => {
    e.preventDefault();
    const success = await login(username, password);
    if (!success) {
      setError('Invalid credentials. Try again.');
    }
  };

  return (
    

      
Login
      

         setUsername(e.target.value)}
          placeholder="Username"
          required
        />
         setPassword(e.target.value)}
          placeholder="Password"
          required
        />
        Login
      
      {error && 
{error}
}
    
  );
};

export default Login;

인증된 구성 요소

// Dashboard.js
import React from 'react';
import { usePulsy } from 'pulsy';
import { logout } from './authService';

const Dashboard = () => {
  const [auth] = usePulsy('auth');

  const handleLogout = () => {
    logout();
    window.location.reload(); // Simple page refresh to redirect to login
  };

  return (
    

      
Welcome, {auth.user.username}!
      Logout
    
  );
};

export default Dashboard;

4단계: 앱 구성요소

App.js 구성 요소에서 사용자가 인증되었는지 확인하고 로그인이나 대시보드를 조건부로 렌더링할 수 있습니다.

// App.js
import React, { useEffect } from 'react';
import { usePulsy } from 'pulsy';
import { validateToken } from './authService';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  const [auth] = usePulsy('auth');

  useEffect(() => {
    // Check token validity on app load
    if (auth.token) {
      validateToken();
    }
  }, [auth.token]);

  return (
    

      {auth.user ?  : }
    
  );
}

export default App;

5단계: 애플리케이션 실행

이제 백엔드와 프런트엔드가 모두 설정되었으므로 애플리케이션을 실행할 수 있습니다.

1. Express 서버 시작:

   node server.js

1. React 프런트엔드 시작:

   npm start

둘 다 실행되면:

• http://localhost:3000을 방문하면 로그인 페이지를 볼 수 있습니다.
• 로그인 후 인증 토큰이 저장되고 대시보드로 이동됩니다.
• 토큰이 유효하면 로그인 상태가 유지되고, 그렇지 않으면 로그인 페이지로 다시 리디렉션됩니다.

요약

이 예에서는 Express.js API가 지원하는 React 인증 시스템과 Pulsy를 통합하는 방법을 보여줍니다. Pulsy는 세션 전반에 걸쳐 인증 토큰 및 사용자 데이터의 지속성을 포함하여 인증을 위한 전역 상태를 관리하는 데 도움을 주어 강력하고 사용하기 쉬운 상태 관리 도구입니다.