API data 주고 받기(가입,login)

유관희·2022년 6월 2일
0
post-thumbnail
const [identify, setIdentify] = useState("");
  const [password, setPassword] = useState("");
  const [inputs, setInputs] = useState({
    email: "",
    password: "",
  });
// const { email, password } = inputs;
  const onClick = (event) => {
    event.preventDefault();
    const loginURL = "http://52.79.143.176:8000/users/login"; // AIP 접속 url
    fetch(loginURL, {
      method: "POST", // 전송방식
      body: JSON.stringify({
        // 통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에 JSON.stringify 라는 메서드를 활용해서
        // 포맷을 기존의 javascript object 에서 JSON String 으로 변환해준다.
        email: identify,
        password: password,
      }),
      headers: {
        "Content-Type": "application/json", // 해당 DATA를 어떻게 받는 것을 지정한다. Content-Type 은 text/html 형식을 받는다.
      },
    })
      .then((response) => {
        if (response.status === 200) {
          //로긴을 시도했을때 200번대가 나오면 로긴에 성공한 것이다.
          // alert("로그인에 성공하였습니다.");
          navigate("/main");
        } else {
          alert("로그인에 실패하였습니다."); // 400번대가 나오면 로긴에 실패한 것이다.
        }
        return response.json(); // json 의 응답 정보를 jsonData에 넘겨주기 위해 return 한다.
      })
      .then((jsonData) => {
        localStorage.setItem("token", jsonData.token); //localStorage 는 저장소로 로긴이 되었을때 setItem의 key값인 token과 value 값인

        // jsonData.token 값을 저장한다.
        console.log(jsonData);
      });
  };
profile
안녕하세요~

0개의 댓글