fetch 이용하여 Signup and Login

fetch("api주소")
 .then((response)=>response.json())
 .then((response)=>{})

• 응답이 오면 response.json()을 통해 json 데이터를 js로 요청하기 위해 한번 더 요청
• js변환 후 두번째 .then을 통해 응답을 받은 후의 로직이 실행된다.

method가 post인 경우

회원가입

fetch("api",{
	method : "POST",
   	body : JSON.stringify({
           user_account : this.state.id,
      	   password : this.state.password
        })
})
.then(res => res.json())
.then(res => console.log(res))

• 회원가입 정보를 서버에 보내고 응답을 받음
• fetch의 첫번째 인자로 api주소, 두번째 인자로 회원가입 정보가 들어간 객체가 들어가야 함. 이때 객체가 js니까 JSON.stringify를 이용해 json으로 바꿔줘야 함
• body에 들어가는 키값은 백엔드가 정한 이름
  -받은 응답은 json이니까 javascript으로 바꾸기 위해 .json()사용

로그인

fetch("api",{
	method : "POST",
   	body : JSON.stringify({
           user_account : this.state.id,
      	   password : this.state.password
        })
})
.then(res => res.json())
.then(res => {
	console.log(res)
 	localStorage.setItem('access-token', res.access_token);
})

• 회원가입한 정보로 로그인을 시도하면 access_token을 받는다.
• localStorage.setItem을 이용해 localstorage에 키 값을 access_token으로 access token을 저장한다.
• 저장하고 있다가 사용자 정보가 필요한 api에 보내 그 페이지에서 필요한 정보를 서버로부터 받는다.

access token 저장하기

• Local Storage: 해당 도메인에 영구 저장
• Session Storage: 해당 도메인의 한 세션에서만 저장,
  닫으면 data가 날라간다.
• cookie: 해당 도메인에 설정한 날짜까지만 저장

request header에 access token 보내려면?

fetch("api",{
        method : "POST",
        headers : {
             Authorization : localStorage.getItem("access_token")
        }
 })
.then(response => response.json())
.then(response => {
   console.log(response.data);
})

-localstorage에 저장했던 access_token을 가져와 header의 Authorization에 넣어 보냄
-응답으로 현재 로그인된 사람의 관련 데이터를 받을 수 있음

참고:https://velog.io/@hyenees/fetch