위코드 파운데이션 과정을 들으며 정리한 내용입니다.

JWT 란?

JWT(JSON Web Token) 는 클라이언트와 서버 간 정보를 JSON 개채로 안전하게 전송하기 우한 개방형 표준입니다.(access token 을 만드는 방법 중 하나) JWT 는 JSON 개체에 기본정보, 전달할 정보, 검증 정보 모두를 담고, 전자 서명이 되어 있어 Secret Key, Public/Private Key Pair 를 사용해 전자 서명을 할 수 있습니다.JWT 를 이용해 토큰으로 인증 과정을 관리하면(클라이언트, 브라우저 스토리지에 토큰 저장) 서버에 세션 정보를 저장할 세션 스토리지나 데이터베이스를 관리하지 않아도 됩니다. 서버 확장성과 멀티 기기, 도메인 활용에서도 편합니다.

// JWT 구조
AAAAAAA.BBBBBBBB.CCCCCCC
A - header - 어떻게 해석해야 하는지
B - payload - 어떤 정보를 포함하는지
C - signature - 위변조를 파악하는 

현대 웹에서 가장 많이 쓰이는 예시는 인증, 인가입니다. 로그인 후 클라이언트에 저장된 JWT 를 제시하며 인증된 사용자인지 허가를 받고 사이트를 이용할 수 있습니다. (마이페이지 접근, 쿠폰 받기, 제품 찜하기, 리뷰 쓰기 등) 유저는 발급받은 JWT 를 서버에 담아 보내고 서버는 유저에게 받은 JWT 의 위변조 여부를 검증해 이상이 없다면 권한을 부여합니다.

JWT 브라우저 storage 저장 방법

로그인 후 response 의 body 에 담긴 토큰(JWT)을 아래 브라우저 저장소에 용도에 맞게 저장할 수 있습니다.

local storage - 해당 도메인 영구 저장
session storage - 해당 도매인 한 세션에만 저장, 창을 닫으면 저장한 data 삭제
cookie - 해당 도메인을 언제까지 저장할지 설정

// JWT 저장 예시

fetch('login api주소', {  // 로그인 할 API 주소로
	method : 'POST',  // POST 메서드 요청을 보내는데,
	headers : {
		'Content-Type' : 'application/json', // 이 콘텐츠 타입으로
	},
	body : JSON.stringify({ // 바디에 담긴 정보를 json 으로 변환해서 요청
		id : 'kim',
		password : '1234',
	}),
})
	.then(( response ) => {
		if( response.ok === true ) { // 첫번째 응답이 통신에 성공해서 status 가 200번대 코드면 JSON 을 객체로 변환하거나
			return response.json();
		}
		throw new Error('통신실패!'); // 실패하면 에러를 던져
	})
	.catch(( error ) => console.log(error)) // 캐치로 에러를 받아 콜솔로 찍어줌
	.then(( data ) => { 
		if ( data.message === 'SUCCES' ) { // 통신에 성공하고 두번째 응답에서 반환한 객체의 키중 message 가 SECCES 면, 로컬 스토리지에 key는 'token' 으로 'value'는 data.token 형태로 저장하고 콘솔로 성공 메시지 출력
			localStorage.setItem( 'token', data.token );
			console.log( '로그인 성공' );
		} else if ( data.message === 'INVALIDU_USER_ID' ) {
		// Id 가 들렸다면 알럿 메시지 뛰우고 함수 종료
			alert('아이디 비밀번호를 확인하시오')
		}
	});

저장한 JWT 활용 방법

토큰으로 인증된 사용자라는 것을 서버에 알려야, 마이페이지 접속이나 상품 주문 및 삭제 등이 가능합니다. 위에서 localStorage 에 저장한 토큰을 storage.getItem() 메서드로 가져와서 사용하면 됩나다.

// 브라우저 storage 에서 JWT 가져오기

const token = localStorage.getItem('token');

이렇게 브라우저 스토리지에서 꺼내 변수에 할당하고 필요한 곳에서 활용하면 됩니다.

// header 에 토큰 담아서 요청하는 코드

const token = localStorage.getItem('token');

fetch('API 주소', {
	method : 'GET',
	header : {
		Authorization : token,
	},
})
	.then(( response ) => {
		if ( response.ok === true ) {
			return response.json();
		}
		throw new Error('통신실패');
	})
	.then(( data ) => console.log(data))
	.catch(( error ) => console.log(error));