TIL - 22 : 회원가입, 로그인 흐름

23 Mar 2022 in Study Log on Today I learned

• 전체적인 흐름
  • 유저가 id와 pw를 입력하면 해당 input의 onChange 에 연결된 이벤트 함수 실행
  • Button을 클릭하면 클릭 이벤트에 연결된 함수 실행
  • 함수 안에서 fetch 함수를 통해 server에 요청(Reqeust)
  • server에서 인증/인가 과정을 거친 후의 결과를 응답(Response)
  • 응답 결과에 따라 Main 페이지로 이동 하거나 에러 메세지를 띄움
• fetch 함수
  • 첫번째 인자는 API 주소
  • 두번째 인자는 HTTP 통신에 관한 내용
    • method 에는 GET, POST, PATCH 등 HTTP method를 입력
    • body 에는 JSON 형태로 주고 받을 데이터
  • JSON.stringify 다른 언어끼리 통신을 하기위한 규약. 모두 스트링으로 보내야함
  • HTTP는 오래걸리기때문에 비동기로 처리
• 회원가입, 로그인, 토큰저장 모두 함축

  // file: "login.js"
     fetch('주소', {
        method: 'POST',
        body: JSON.stringify({
          id: inputValue.id,
          password: inputValue.pw,
        }),
        headers: { AUTHORIZATION: localStorage.getItem('token') },
      })
        .then(res => res.json())
        .then(data => {
          console.log(data);
          if (data.message === 'success') {
            return alert('회원가입 성공');
          }
          if (data.message === 'fail') {
            return alert('...');
          }
          if (data.token) {
            localStorage.setItem('westa-token', data.token);
          }
          navigate('/main-yonghyeon');
        });