서버와 통신하기(회원가입, 로그인)

기본로직

Id,pw 입력/ 로그인하기 누르면 일어나는 로직
1. Id, pw 서버에 전달 (front)
2. Id,pw 일치 -> OK! (back)
3. Jwt 전달 (back -> front)
4. 브라우저에 jwt 저장 (front)
5. Local storage, session, cookie

로그인에 성공하면 jwt로 만든 access token을 받는다
front에서 access token을 가지고 있다가 필요할때 이 access token을 보내준다

기본이론

access token을 local storage에 저장하기

한번만 로그인하면 다음에는 안해도 되도록 local storage에 저장

• Local storage: 해당 도메인에 영구저장
• Session storage: 해당 도메인의 한 세션에서만 저장하고 싶을때. 창을 닫으면 data가 날아간다
• Cookie: 해당 도메인에 날짜를 설정, 그때까지만 저장

jwt(Json Web Token)
access token을 만드는 방법중 하나
백엔드에서 jwt를 생성하면서, 해당 user가 누구인지 식별할만한 정보를 담는다

서버와 통신하기(로그인)과정

1.fetch 함수를 이용하여 HTTP 전송요청하기

fetch("API 주소", {
  method: "POST",
  body: JSON.stringify({
    email: id,
    password: pw,
  }),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));

2. setitem 함수를 이용하여 access token을 local storage에 저장하기

setitem 메서드를 사용한다
localstorage.setitem('저장할 이름','저장될 데이터')
localstorage에 값을 저장

const server = e => {
    e.preventDefault();
    fetch('http://10.58.6.173:8000/users/signin', {
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: password,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.access_token) {
          localStorage.setItem('token', result.access_token);
          goToMain();
        } else {
          alert('회원정보가 잘못되었습니다');
        }
      });
  };

이 코드 그대로 signin대신 signup을 써주면 회원가입!
회원가입처리를 한 뒤에 token을 받아서 signin으로 바꾸고 코드를 실행하면 된다

signup으로 회원가입이 완료되면 고유의 토큰이 발급되는데, setitem을 통해 맞는 id,pw를 입력하면 고유의 토큰을 불러온다.