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

유튜브 프리미엄은 로그인을 해야 광고 프리패스를 할 수 있고,
인스타그램이나 소셜로그인에선 로그인을 해야 내 계정의 공간으로 들어 설 수 있다.

나와 내가 아닌 것을 구분해주는 이 절차에는
Token이라는 것이 필요하다.

이번 포스팅을 통해, token이 localStorage에 저장되고, 특정 사이트에서 필요할 때 서버에 보내는 것까지 과정을 알아보자

Token

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

하지만 token을 사용한다면

로그인 완료시에 마치 인증 스티커와 같은 token을 전달받고, 마이 페이지 등 로그인이 필요한 사이트를 접속할대마다 서버에 token을 보내며 인증 여부를 확인하게 된다. 즉 매번 번거롭게 로그인할 필요가 없는 것이다.

Token Process

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

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

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

token이 true면 localStarage에 login-token이라는 키 값으로 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({
      //생략
  })
}

참고

• window.localStorage
• Authorization