로그인 기능 구현 - LoginPage

 

 

이제 로그인 페이지의 기능을 추가할 차례다.

 

 

| 로그인 요청 서버로 전송하고 성공시 JWT저장하는 로직 추가

 

frontend/src/pages/LoginPage.js

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:5000/api/auth/login', formData);
      localStorage.setItem('token', res.data.token); // JWT 저장
      setMessage('로그인 성공! 🎉');
      console.log(res.data); // 디버깅용
    } catch (err) {
      console.error(err);
      setMessage(err.response?.data?.message || '로그인 실패 😢');
    }
  };

 

/ localStorage.setItem('token', ...) : 로그인 성공시 JWT를 브라우저 저장소에 저장한다.

 

 

브라우저에서 로그인 정보를 제대로 입력했다면 아래처럼 확인할 수 있다.

 

 

 

 

 

| 로그인 완료 처리 추가

 

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [message, setMessage] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:5000/api/auth/login', formData);

      // 로그인 성공 시 처리
      const { token, user } = res.data;

      // localStorage에 저장
      localStorage.setItem('token', token);
      localStorage.setItem('user', JSON.stringify(user));

      setMessage('로그인 성공 🎉');
      navigate('/dashboard'); // 로그인 후 이동할 페이지 (예시)
    } catch (err) {
      console.error(err);
      setMessage(err.response?.data?.message || '로그인 실패 😢');
    }
  };

  return (
    <div>
      <h2>로그인</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          placeholder="이메일"
          value={formData.email}
          onChange={handleChange}
        /><br/>
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          value={formData.password}
          onChange={handleChange}
        /><br/>
        <button type="submit">로그인</button>
      </form>
      <p>{message}</p>
    </div>
  );
};

export default LoginPage;

 

/ const { token, user } = res.data : 응답에서 token과 user를 구조분해 할당한다.

/ localStorage에 token과 user를 저장하는데 user는 JSON문자열로 저장해야 한다.

/ navigate()를 사용해서 로그인 후에는 dashboard로 리디렉션한다. (원하는 페이지로)

 

 

아직 dashboard 페이지를 작성하지 않았기 때문에 로그인이 정상적으로 되는지 확인 하는 건 여기서 하지 않겠다.