fetch함수로 로그인, 댓글 구현하기

로그인

• body에 로그인 id와, password를 받아 정보를 보내는 POST method를 사용하였다.

  goToMain = (e) => {
    e.preventDefault();
    fetch("http://10.58.0.249:8000/account/signin", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({
        username_or_email_or_phone: this.state.id,
        password: this.state.password,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.access_token) {
          localStorage.setItem("access_token", res.access_token);
          this.props.history.push("/main-hk");
        } else {
          alert("로그인 정보를 확인하세요");
        }
      });
  };

• 로그인 api에서 로그인이 성공하면 jwt로 만든 access token을 받고, 받아온 access token을 local storage에 저장하였다.

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

저장되었는지 개발자도구 apllication 탭에서 확인 할 수 있다.
이 access token을 사용자 정보가 필요한 api를 호출할 때 해당 access token을 보내주어야 한다.

동기함수, 비동기 함수

• fetch 함수는 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 쓰는 것이다.

• 동기함수는 위에서 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다.

  .then((res) => console.log(res)
  console.log는 동기함수라서 콘솔로그 다음 함수를 실행하는 코드를 작성한다면 다음코드를 실행하지 못하는 에러발생!!
  res받은것을 확인후 다음 코드 실행을 위해 지워야한다.

댓글달기

  addComment = (e) => {
    e.preventDefault();
    const token = localStorage.getItem("access_token");
    fetch("http://10.58.0.249:8000/comment", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
        Authorization: token, //Authorization : 인증토큰을 서버로 보낼때
      },
      body: JSON.stringify({
        content: this.state.content,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({ commentList: res.message });
        this.setState({ content: "" });
      });
  };

request header에 access token 보내기

일단 백앤드에게 access token을 어디에 보내줄지 확인하고, 보통은 request header의 Authorization에 넣어 보낸다.

1. Local Storage에 토큰 존재하는지 확인
2. 변수에 로컬스토리지의 토큰값을 가져온다.(getItem)
3. request header의 Authorization에 추가하기