[React] Project Levup - 로그인 기능 만들기

https://chunws13.tistory.com/46

[FastAPI] Project Levup - 회원가입과 로그인 기능 만들기

백엔드 로그인 기능 구현이 끝났다면, 프론트엔드에서 응답을 받아 로그인을 구현하는 뷰를 만들어 보자

React 설치하는 방법은 이전에 작성한 적이 있으므로 생략한다.

npm install axios
npm install react-cookie

 

백엔드로 요청을 보내기 위해 axios, 응답한 내용 (로그인이 되었다는 증거)을 cookie에 저장하기 위해 react-cookie 를 설치하자

1. 화면 부분

return (
    <div>
        <div> Welcome! </div>
        <form onSubmit={SubmitFunc}>
            <div>
                <input type='text' name='id' placeholder='ID'/> 
            </div>
            <div>
                <input type='password' name='pw' placeholder='Password'/>
            </div>
            <button type="submit"> sumbit </button>
        </form>
    </div>
  )

PC 환경에서 버튼 클릭 없이 엔터키 만으로 로그인을 할 수 있도록 form 태그를 활용하였고,

form 제출 시 SubmitFunc 함수를 호출하도록 코드를 작성했다.

 

2. 기능 부분

const SubmitFunc = (event) => {
    event.preventDefault();
    const cookie = new Cookies();
    const id = event.target.id.value;
    const password = event.target.pw.value;
    
    const postData = {id, password, "email": "test@naver.com"};

    axios.post("http://127.0.0.1:8000/api/login", postData)
        .then(response => {
            cookie.set("token", response.data.token)
            window.location.reload()  
        });
  }

event.preventDefault(); 로 form 제출 시 페이지가 새로고침 되는 것을 방지.

신규 Cookie 객체를 생성해서 cookie 변수에 할당하고, 화면 input 태그의 id 와 pw 를 가져와서 post 하기 위한 데이터에 넣는다.

백엔드 로그인 로직에서 email 필드는 사용하지 않으나, 해당 부분이 없는 경우에는 데이터 양식 불일치로 에러가 난다.

요청 엔드 포인트와 함께 올바른 데이터를 넣어서 요청하면, 백엔드에서는 {"success" : "로그인성공", "token" : token } 이 반환된다.

이 중 token 부분을 cookie에 token 이라는 이름으로 세팅한 후에 페이지를 새로고침한다.

 

3. App.js 코드

import Login from './Login';
import { Cookies } from "react-cookie"
function App() {
  const cookie = new Cookies();
  const token = cookie.get("token");
  const RemoveCookie = () =>{
    cookie.remove("token");
    window.location.reload();
  }

  if (token == undefined){
    return (
      <div>
        <Login/>
      </div>
    );
  } else {
    return (
      <div>
        You're Logined
        <button onClick={RemoveCookie}> logout </button>
        <Memo/>
      </div>
    )
  }
}

export default App;

초기 화면에서 쿠키 값을 검사하여, 쿠키 이름이 token인 값이 존재한다면, 로그인 한 것으로 간주하고

You're Logined 와 함께, 로그아웃이 가능한 버튼을 보여준다. (로그아웃 버튼 클릭 시 cookie 값 삭제 후 페이지 재시작)

그렇지 않은 경우에는 로그인할 수 있는 화면을 보여준다.