React 로그인 구현하기

로그인 구현하기

백엔드 데이터에 회원가입 정보를 전송한뒤, 로그인 할 차례이다.
로그인은 이메일과 패스워드만 정보가 필요하고 그 정보가 백엔드에 저장되어 있는 데이터와 일치 할 시 토큰을 받아오는 식으로 구현하였다.

fetchLogin = () => {
    fetch(API주소, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.ACCESS_TOKEN) {
          localStorage.setItem("TOKEN", res.ACCESS_TOKEN);
          localStorage.setItem("NICKNAME", res.NICKNAME);
        }
        this.onLoginSuccess();
      })
      .catch((error) => {
        alert("통신불가");
      });
  };

fetch함수 바디에 이메일과 패스워드 데이터를 전송하면 일치하는 데이터가 있을 시, 백엔드에서 토큰을 받아와 브라우저에 로그인에 대한 토큰을 저장한다. 여기서 토큰은 JWT방식으로 암호화가 되어 받게된다.

로그인절차가 진행되면 isSuccessLogin 이라는 setState를 통해 true로 바뀌게 된다. 상단 NAV바에 닉네임이 표시되고, 로그인과 회원가입 버튼이 LOGOUT버튼으로 바뀌어 렌더링 된다.