Springboot Jwt 프론트와 통신하기!(3) with localStorage,자바스크립트

jwt 토큰을 저장하는 방법은 크게 두 가지이다

https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie

JWT는 어디에 저장해야할까? - localStorage vs cookie

이 글을 참고해서 장단점이 있다 

 

쿠키와 localStorage인데 

 

localStorage부터 하겠다

 

백엔드에서는 

그냥 response.setheader로 보내준다

 

프런트에서

http//localhost:9090

헤더에서 값을 꺼낸다

jwt=xhr.getResponseHeader('Authorization');
refresh=xhr.getResponseHeader('refreshToken');

localStorage에 값을 넌다

localStorage.setItem('Authorization', jwt);

localStorage.setItem('refreshToken', jwt);

 

테스트

localStorage 키는 법은

f12 아니면 검사 클릭 후 Application 클릭후 localStorage 안에 생긴다!

localStorage

잘 들어와 있고

 

이제 페이지 이동!

http//localhost:9090

버튼을 클릭하면

http//localhost:9090

 

후아 

도대체 프런트에서 어떻게 보관해야 하는지

찾다가 성공했다 이제 통신 시 

꺼내서 서버에게 던져주면 된다!

다음번엔 쿠키 방식을 봐보자!