유투브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고,
인스타그램에선 로그인을 해야 내 피드로 갈 수 있다.

이러한 인가 과정에 필요한 token
로그인 후 발생되는 token을 localStorage에 저장하고, 특정 사이트에서 필요할 때 서버에 보내는 것까지 알아보자.

token, 왜 필요한가?

HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다.

이러한 상황을 막기 위한 것이 token !

먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마이페이지 등 로그인이 필요한 사이트를 접속할 때마다 서버에 token을 보내며 나는 로그인했다! 권한있다! 라고 알려주니 다시 로그인할 필요가 없다.

어떻게 저장하고, 서버에 보내는가?

기존 세팅 : 로그인 버튼을 누르면 handleLogin() 함수 호출

1. 로그인 성공시 localStorage에 token 저장

1) 백엔드 측에서 설정한 로그인 성공시 response.MESSAGE와
2) 토큰의 발급 유무에 따라 로그인 성공 여부를 알 수 있다.

token이 true이면(있으면) localStorage에 login-token이라는 키 값으로 token을 저장했다.
(localStorage에 저장할 경우 해당 도메인에 영구저장)

//아래 부분을 fetch 함수의 두 번째 .then()에 작성

if (response.ACCESS_TOKEN) {
	localStorage.setItem('login-token', response.ACCESS_TOKEN);
}


//참고 : 코드 전문

handleLogin = () => {
    fetch(`${signinAPI}/login`, {
      method: 'POST',
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
      }),
    })
   
      .then(response => response.json())
  
      .then(response => {
        if (response.ACCESS_TOKEN) {
          localStorage.setItem('login-token', response.ACCESS_TOKEN);
        }
      });
  };

2. 인가(Authorization)가 필요한 사이트에서 token 전달

이제 마이페이지, 장바구니 등 인가 과정이 필요한 사이트에서 데이터를 요청할 때, 아래의 방법으로 localStorage에 저장해두었던 token을 쏙쏙 꺼내 함께 전달하면 된다!

fetch함수의 두 번째 인자는 조건 부분이므로, 이 부분의 headers에 아래 부분을 작성한다.

• 'Content-Type': 'application/json' : 데이터를 json형태로 전송
• Authorization: localStorage.getItem('login-token') : localStorage에 login-token key로 저장한 값을 HTTP Authorization 요청 헤더로 전달

  fetch(`${API}/login`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: localStorage.getItem('login-token'),
      },
      body: JSON.stringify({
      	//생략
      })

📌 학습참고자료
MDN - Window.localStorage
MDN - Authorization