React | 로그인 후 token 저장, 서버에 전달하기

유투브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고, 인스타그램에선 로그인을 해야 내 피드로 갈 수 있다. 이러한 인가 과정에 필요한 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

 

---

본 글은 2021년 9월 5일 개인 블로그(velog)에 작성된 글입니다.