JWT 저장하기

JWT 란?

jwt는 Json Web Token의 약자로 access token을 만드는 방법 중 하나입니다. 백앤드에서 jwt를 생성할 때, 해당 user가 누구인지 식별할만한 정보를 담을 수 있습니다.

만약 사용자가 아이디와 비밀번호를 입력해 로그인하면 백엔드 서버에서 eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo1fQ.Dy3PPHIOFFe3ScGTb8x3hewItnpOcgC9YDdW7v27XHg
다음과 같은 형태의 jwt를 보내줄 것입니다. 그리고 이 토큰은 서버에서는 저장하고있지 않아서 stateless한 성질을 지니고 있습니다.

JWT의 구조

암호화된 3가지 데이터를 이어붙인 형태(aaa.bbb.ccc)로 구성되어 있습니다.
1. 헤더: 알고리즘(3번 서명 값을 만드는데 사용될 알고리즘이 지정 ex) HS256), type이 들어감 (언제나 JWT)
2. 페이로드: 토큰이 갖는 데이터
3. 서명 (signature): 1번 헤더에 정의된 알고리즘을 통해 암호화한 비밀 값으로 서버만 알고 있음

JWT의 용도

그렇다면 서버에서 전달받은 JWT는 어떻게 사용될까요?

페이지를 이동할 때 마다, 아니면 브라우저를 끄고 켤때마다 매번 로그인을 할 수 없기 때문에 이렇게 access token을 주고 받아서 사용자 인증을 진행합니다. 로그인을 하면서 받은 access token을, 프론트엔드는 어딘가에 보관하고 있다가 사용자 정보가 필요한 api에 해당 access token을 백앤드에 보내줍니다.

예를 들어, 쇼핑몰 사이트에서 장바구니 페이지에 들어간다면?
해당 페이지에서 사용자가 장바구니에 담은 상품을 가져오는 api를 호출할 때, access token까지 같이 보내주면, 백앤드에서

아! 이 token은 유효하구나
user_id는 5구나
user_id 5가 장바구니에 담은 상품을 보여주자
이런 과정을 거쳐서 사진 목록을 response 해주는 것입니다.

백엔드에게서 전달받은 JWT를 저장하자

백엔드에세 전달받은 access token은 어디에 저장해야 할까요? 원하는 인증 인가 절차에 따라 다양한 위치에 저장이 가능합니다.

• Local Storage: 해당 도메인에 영구 저장하고 싶을때
• Session Storage: 해당 도메인의 한 세션에만 저장하고 싶을때 (브라우저를 닫으면 data가 날아간다.)
• Cookie: 해당 도메인에 날짜를 설정하고 그 때 까지만 저장하고 싶을때

이번 프로젝트에서는 Local Storage에 저장하는 방법을 채택해 진행하였습니다.

Local Storage에 토큰 저장하기

if (token) {
      localStorage.setItem('wtw-token', token);
    }
    alert('로그인 되었습니다');

해당 코드는 로그인에 성공했을때 실행시킬 함수내의 코드 입니다.

백엔드 서버로부터 전달받은 토큰을 localStorage.setItem(); 메서드를 사용해 Local Storage에 저장합니다. setItem 메서드의 첫번째 인자에는 저장하고싶은 데이터의 key name이 입력되고 두번째 인자에는 값이 저장됩니다. 토큰을 저장하고자 하는 경우에는 토큰이 값이되어 설정해준 키와 값이 저장되게 되는것입니다.

이렇게 개발자 도구내의 aplication 패널내에 값이 제대로 들어왔다면 원하는 다양한 방향으로 JWT 토큰을 사용할 수 있게 되는것잆니다.