SPRING :: Security 로그인 구현 03 React 화면 구성

 

Spring Security (Form-Based Authentication)

가장 기본적인 자체 로그인 서비스 구현 실습

 

03 React 화면 구성

 

 

1. 리액트 프로젝트 생성

npx create-react-app [프로젝트 이름]

 

 

2. 프로젝트에 axios 라이브러리 설치 (fetch 사용시 불필요) / 라우터 설치

npm install axios
npm install react-router-dom

 

 

3. 로그인 컴포넌트 생성

import React, { useState } from 'react';
import securityImage from '../images/security.png';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const LoginComponent = () => {
  const [userId, setUserId] = useState('');
  const [userPw, setUserPw] = useState('');
  const [rememberMe, setRememberMe] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log('id:', userId);
    console.log('password:', userPw);
    console.log('Remember me:', rememberMe);

    try {
      const loginData = {
        id: userId,
        password: userPw,
      };
      const response = await axios.post('http://localhost:8383/api/loginProcess', loginData, {
        withCredentials: true,
      });
      console.log('로그인 성공:', response.data);

      if(response.status === 200){
        alert(`${response.data.id} 님, 환영합니다`);

        navigate('/mainhome');
      }


    } catch (error) {
      console.error('로그인 실패', error);
    }
  };

  return (
    <div className="login-container">
      <div className="login-box">
        <img src={securityImage} alt="Security" className="login-image" />
        <h2 className="login-title">Login</h2>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="ID"
            value={userId}
            onChange={(e) => setUserId(e.target.value)}
            required
            className="login-input"
          />
          <input
            type="password"
            placeholder="Password"
            value={userPw}
            onChange={(e) => setUserPw(e.target.value)}
            required
            className="login-input"
          />
          <div className="checkbox" style={{ marginRight: 280, marginBottom: 10, marginTop: -10 }}>
            <label>
              <input
                type="checkbox"
                name="remember-me"
                checked={rememberMe}
                onChange={(e) => setRememberMe(e.target.checked)}
              />
              자동 로그인
            </label>
          </div>
          <button type="submit" className="login-button">로그인</button>
        </form>
        <button className="signup-button">회원가입</button>
      </div>
    </div>
  );
};

export default LoginComponent;

 

 

4. 리액트 개발 서버 실행

npm start

 

 

5. 화면 테스트

 - 콘솔에 입력한 값이 정상 출력되는지 확인

 - 현재는 컨트롤러가 없으므로 실패가 뜨는 것이 정상이다

 

 

6. 로그인 성공시 보여줄 화면 생성

 - 로그인 확인만 할 수 있도록 간결하게 생성

import React from 'react';

const MainHomeComponent = () => {
    return (
        <div>
            MainHomeComponent
        </div>
    );
};

export default MainHomeComponent;

 

7. 라우터 설정

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import LoginComponent from './component/LoginComponent';
import MainHomeComponent from './component/MainHomeComponent';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LoginComponent/>}/>
          <Route path="/mainhome" element={<MainHomeComponent/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

여기까지 준비되었으면 로그인 화면은 완료이다