Axios 를 이용한 로그인 구현하기

 

Spring Boot 로 구현한 로그인 기능을 프론트와 연결하기

 

백엔드와의 요청처리를 위해 React Axios 를 이용한 통신을 사용할 예정이다

💡Axios 란 무엇인가?

• node.js 의 HTTP 요청 또는 브라우저의 XMLHttpRequests 를 만드는 데 사용되는 JavaScript 라이브러리
• Promise API 를 지원하므로 비동기 HTTP 요청을 간단하게 처리 가능
• JSON 데이터를 보내거나 받을 때 Axios 는 JSON 과 데이터를 자동으로 변환
• CSRF 보호 기능이 내장

---

🔨사용 툴

• VSCode

---

 

이전 포스팅에 생성했던 Spring Boot, JWT 와 연동해 줄 예정

---

1. 프로젝트 생성

 

사용할 폴더를 열거나 터미널에서 cd 명령어를 통해 디렉토리로 이동하여 아래의 명령어를 입력

 

npx create-react-app <프로젝트명>

 

2. Tailwind CSS 설치 및 초반 작업

 

2-1. 깔끔한 UI 를 위해 Tailwind Css 를 사용할 것이므로 아래의 명령어를 통해 설치

npm install -D tailwindcss

 

2-2. index.js 수정

TailWind CSS 지시문을 CSS 에 통합하도록 index.js 를 아래와 같이 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

 

2-3. tailwind.config.js 생성

npx tailwindcss init

 

2-4. dist 폴더 생성

npx tailwindcss -o ./dist/output.css --watch

 
 
📢자세한 내용은 Tailwin CSS 홈페이지를 참고!
 

Installation - Tailwind CSS

 

3. 로그인 페이지 생성

 

3-1. 로그인 페이지 생성

import React from "react";

const Login = () => {

    return (
        <>
            <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
            	<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                    로그인
                </h2>
                <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
                    <form className="space-y-6" action="#" method="POST">
                        <div>
                            <label for="email" className="block text-sm font-medium leading-6 text-gray-900">
                                아이디
                            </label>
                            <div className="mt-2">
                                <input
                                    id="id"
                                    name="id"
                                    type="text"
                                    required
                                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                />
                            </div>
                        </div>
                        <div>
                            <div className="flex items-center justify-between">
                                <label for="password" className="block text-sm font-medium leading-6 text-gray-900">
                                    비밀번호
                                </label>
                            </div>
                            <div className="mt-2">
                                <input
                                    id="password"
                                    name="password"
                                    type="password"
                                    autocomplete="current-password"
                                    required
                                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                />
                            </div>
                        </div>

                        <div>
                            <button
                                type="submit"
                                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                로그인
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </>
    );
};

export default Login;

 

• 페이지의 기본 컴포넌트 생성
  • 본 포스팅에서는 Tailwind CSS 홈페이지의 제공 Component 를 사용

 

3-2. 로그인 정보를 로컬 스토리지에 저장해주기 위한 설정

 

import React, { createContext, useState } from "react";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [authData, setAuthData] = useState(() => {
    const storedAuthData = localStorage.getItem('authData');


    let initialAuthData = storedAuthData ? JSON.parse(storedAuthData) : {
      id: null,
      username: null,
      nickname: null,
      createdAt: null,
      role: null,
      token: localStorage.getItem("token") || null,
    };

    // 관리자 여부 확인 
    initialAuthData = {
      ...initialAuthData,
      isAdmin: initialAuthData.role === 'ADMIN',
    }
    return initialAuthData;

  });

  return (
    <AuthContext.Provider value={{ authData, setAuthData }}>
      {children}
    </AuthContext.Provider>
  );
};

 

3-3. Axios 패키지 다운로드

npm install axios

 

3-4. react-router-dom 패키지 다운로드

npm install react=router-dom

 

3-5. Spring Boot 와의 통신을 위한 Axios 코드 작성

 

import React, { useContext, useState } from "react";
import { AuthContext } from "../context/AuthContext";
import { useNavigate } from "react-router-dom";
import axios from "axios";

const Login = () => {

    const { setAuthData } = useContext(AuthContext);
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const navigate = useNavigate();

    const handleLogin = async (e) => {
        e.preventDefault();

        try {
            const response = await axios.post("/api/login", {
                username,
                password,
            });

            const { code, data } = response.data;

            if (code === 1) {
                const { id, username, nickname, createdAt, role } = data;
                const token = response.headers.authorization;
                const newAuthData = { id, username, nickname, role, createdAt, token };
                setAuthData(newAuthData);
                localStorage.setItem("token", token);
                localStorage.setItem("authData", JSON.stringify(newAuthData)); // authData를 로컬 스토리지에 저장
                navigate("/");
            } else {
                alert("아이디 혹은 비밀번호가 올바르지 않습니다.");
            }
        } catch (error) {
            if (error.response && error.response.status === 401) {
                alert("아이디 혹은 비밀번호가 올바르지 않습니다.");
            }
        }
    };

 

• axios 사용을 위한 import 추가
• 로그인 정보를 로컬 스토리지에 저장해주기 위해 useContext, AuthContext import 추가
  • context 를 사용하기위한 선언 추가
• response
  • 로그인 창에서 입력해줄 데이터 (백엔드에서 id 를 username 으로 password 를 password 로 작성하였음)
• code
  • 백엔드에서 응답코드가 성공(200)일 때 code 값으로 1 을 반환
  • data

 

3-6. input 코드 수정

<div className="mt-2">
   <input
     id="username"
     name="username"
     type="text"
     autoComplete="username"
     required
     value={username}
     onChange={(e) => setUsername(e.target.value)}
     />
</div>

• 입력 이벤트 핸들러 onChange
  • (e) => setUsername(e.target.value) : 사용자가 입력 필드에 타이핑 할 때마다 `setUsername` 을 호출하여 상태를 새로운 값으로 업데이트
  • 이를 통해 입력 필드와 리액트 상태 사이의 동기화가 유지
• 비밀번호 input 코드도 위와 같이 수정

 

4. Spring Boot 와의 통신을 위한 proxy 설정

"proxy": "http://localhost:10004"

• package.json 에 proxy 추가
  • Spring Boot 프로젝트의 properties 에 설정해준 port 로 설정

 

5. App.js 수정

import React from "react";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import { AuthProvider } from "./context/AuthContext";
import Home from "./components/Home";
import Login from "./components/Login";


function App() {
  return (
    <Router>
      <AuthProvider>
        <div className="main-content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
          </Routes>
        </div>
      </AuthProvider>
    </Router >
  );
}

export default App;

• 페이지 이동을 위한 Route import
  • Route 에 이동 페이지 추가
• AuthProvider 로 감싸 인증 확인

 

6. 프로젝트 실행

npm start