로그인 react와 스프링 백 연동

[greenblueredgreen]

로그인 react의 파라미터를 스프링 백으로 넘기는 과정

[greenblueredgreen]

import React, { useState } from "react";
import { Container, Row, Col, Card, Form, Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import axios from 'axios';

const Login = () => {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

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

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post(`http://localhost:8080/user/sign-in?email=${formData.email}&password=${formData.password}`);
    localStorage.setItem('token', response.data);  // 로그인 성공 시 토큰 저장
    navigate('/main');  // 메인 페이지로 이동
  } catch (error) {
    console.error('Login failed:', error);  // 에러 처리
  }
};

  return (
    <Container className="py-5">
      <Row className="justify-content-center">
        <Col md={6}>
          <Card className="shadow">
            <Card.Body>
              <h2 className="text-center mb-4">로그인</h2>
              <Form onSubmit={handleSubmit}>
                <Form.Group className="mb-3">
                  <Form.Label>이메일</Form.Label>
                  <Form.Control
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                  />
                </Form.Group>
                <Form.Group className="mb-3">
                  <Form.Label>비밀번호</Form.Label>
                  <Form.Control
                    type="password"
                    name="password"
                    value={formData.password}
                    onChange={handleChange}
                    required
                  />
                </Form.Group>
                <Button variant="primary" type="submit" className="w-100">
                  로그인
                </Button>
              </Form>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  );
};

export default Login;

[greenblueredgreen]

import axios from 'axios'; 코드를 추가해줘서 서버 파라미터를 넘길 수 있도록 설정해준다.

[greenblueredgreen]

계속 400에러가 떠서 파라미터 에러인지 경로 설정 오류인지 에러를 잡는데 시간이 오래걸렸다.

[greenblueredgreen]

여러 코드를 실행시킨 끝에, axios.post경로를 절대 경로로 잡아서 설정해주고 뒤에 파라미터를 넘기는 방식으로 만들었다.

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post(`http://localhost:8080/user/sign-in?email=${formData.email}&password=${formData.password}`);
    localStorage.setItem('token', response.data);  // 로그인 성공 시 토큰 저장
    navigate('/main');  // 메인 페이지로 이동
  } catch (error) {
    console.error('Login failed:', error);  // 에러 처리
  }
};

[greenblueredgreen]

백에다 넣고 실행해봤더니 디버깅 결과 파미터들이 정상적으로 넘어오는 것을 확인할 수 있었다.