[TIL 34] fetch 함수를 통한 로그인 인증&인가

인스타그램 클론을 진행하면서 드디어! 백엔드랑 소통하는 시간! (🤭)
백앤드에서 직접 만든 로그인 api으로 프론트에서 http 요청과 응답을 주고 받는 실습을 진행했다.

로그인 인증 & 인가

우선 로그인 버튼을 눌렀을때 실행되는 goToMain함수 안에서 fetch함수를 통해 백엔드와 소통한다.

로그인이 성공했을 경우 메인으로 이동하고 실패했을 경우 실패했다는 alert가 뜬다.

fetch 함수를 하나하나 뜯어보자면,

fetch('http://10.58.4.176:8000/users/login', {
  method: 'POST',
  body: JSON.stringify({
    email: id,
    password: password
  })

})
  .then((res) => res.json())
  .then((data) => {
    const { message, token, user_email } = data;

    if (message === 'SUCCESS') {
      history.push('/main');
      localStorage.setItem('token', token);
      localStorage.setItem('userName', user_email);
    } else {
      alert('로그인 실패');
    }
  })

fetch 함수의 첫번째 인자는 백엔드에서 만든 API 주소를 넣는다.
fetch 함수 두번째 인자는 보내려는 정보를 넣어 객체 형태로 백엔드 API로 전달한다.
백엔드 서버에 입력받은 데이터를 바디에 담아서 전달해야하므로 POST메소드를 사용한다.
JSON 바디에 보낼 데이터를 string형태에서 JSON 으로 변환해서 보내야하므로 stringify메소드를 사용한다.
body: JSON.stringify({ key: value })

key : 벡엔드에서 미리 설정한 키 값 (이 키 값이 다르면 키에러가 발생한다.)
value : 프론트에서 백엔드 서버에 보낼 값.

백엔드 서버에 요청을 보내고 받은 response데이터를 사용하기 위해서
.then(res => res.json()) 함수를 사용해 json형태로 바꿔준다.

첫번째 then함수에서 변환한 데이터를 두번째 then함수에서 받아 사용할 수 있다.
올바른 유저가 로그인에 성공할 경우 백엔드에서는 access token을 발행해 보내주었다.
나는 그렇게 받은 token과 userName을 로컬스토리지에 저장했다! 🔥

짜잔!!!
뭔가,, 이렇게 저장된 유저네임을 사용해보고싶어서 메인에서 백엔드로부터 받은 userEmail을 로컬스토리지에 가져와서 mainRight이랑 댓글 창에서 사용해보았다. (실제로는 이렇게 유저이메일을 가져오는 경우는 없다고 한다 ㅎㅎ..)

const userName = localStorage.getItem('userName');

목데이터가 아닌 실제로 백엔드랑 통신해서 받은 데이터를 사용하니 너무 재밌었다 🥰