Jwt/Jwt 프론트엔드+백엔드 통신

Springboot Jwt토큰 프론트와 통신하기!(4) with cookie,XMLHttpRequest

디비드킴 2021. 7. 21. 16:39

액세스 토큰은 =로컬 스토리지에 저장하고

리프레시 토큰은 =httponly 쿠키로 전송해 주자!

 

jwtLoginFilter

jwtLoginFilter.java

 

refresh라는 이름으로 내용을 담는 쿠키 생성

Cookie cookie=new Cookie("refreshToken"refreshToken);

자바스크립트에서 접근 못하게 httponly 켜주고

cookie.setHttpOnly(true);

쿠키 저장

response.addCookie(cookie);

 

서버에서 쿠키 받는 법

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

 

Access-Control-Allow-Credentials - HTTP | MDN

응답헤더 Access-Control-Allow-Credentials 는  요청의 자격증명 모드(Request.credentials)가 "include" 일때,   브라우저들이 응답을 프로트엔드 자바스트립트 코드에 노출할지에 대해 알려줍니다.

developer.mozilla.org

 

js

js

xmlhttprequest 생성

var xhr = new XMLHttpRequest();

메서드/url지정

xhr.open('POST', 'http://localhost:8080/login');

데이터 형식 지정

xhr.setRequestHeader("Content-Type", 'application/json');

여기가 중요하다

이게 true여야 다른 포트 쿠키를 받을 수 있다

xhr.withCredentials = true;

전송

 xhr.send(data);

결과

xhr.onload=function()

 

 

테스트

로그인 버튼 클릭 전

로그인 후

 

 

와 진짜 

억울한 게 xhr.withCredentials = true;를 어제 찾았는데

다른 곳에 너놓고

왜 로그인해도 안 오지?

온갖 검색을 다했는데 다시 보니 로그인에 저게 없었다...

 

 

전송 테스트

 

restcontroller

restcontroller.java

바로 이름에 해당하는

쿠키를 가져온다

@CookieValue(value = "refreshToken"required = falseCookie rCookie

정말 좋다

vscode

index2

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJqd3RUb2tlbiIsImV4cCI6MTYyNjg1MTAzNn0.E47PtIg57TuhKPa2Imj-6qPfjPY7m4kvnHyDnfv3OzaRV9rtpH-1jENiANyCeTTi78mTC4jzyY7rF7-QzO24zA

그래 이거지...

받았다!!!!

 

진짜 이제 토이 프로젝트 시작해보자!

 

+추가 

네이버 로그인 테스트 중

찾은 버그였다

 

controller

controller.java

 

리다이렉션으로 

홈으로 보내려는 시도였다

당연히 쿠키가 가는 줄 알았다

 

 

테스트

로그인 띠용?

http://localhost:9090/front/home.jsp

페이지 이동

http://localhost:9090/front/home.jsp

띠용?

보낸 쿠키가 없다 

 

쿠키 전송 테스트

vscode

띠용? 쿠키는 온다..?

즉 나나타지 않는다 

하.. 진짜 산 넘어 산이다..

다시 구글링

 

https://brocess.tistory.com/252

 

[ Springboot ] 쿠키를 response에 add해줬는데 브라우저에 안남아요??? redirect??

토이프로젝트를 하던 중 쿠키에 특정 값을 만들어 굽는 작업이 필요했다. 따라서 HttpServletResponse에 addCookie를 하여 쿠키를 구워줬지만 브라우저 개발자도구에서 눈을 씻고 찾아봐도 보이지가 않

brocess.tistory.com

비슷한 상황을 찾았다

path를 셋 해줘야 한다 한다

 

service

naverLoginService.java

cookie.setPath("/");

추가해준다!

 

테스트

(테스트 전 꼭 브라우저에서

쿠키를 삭제해 주자)

띠용 안 나타난다 하지만?

페이지를 이동하거나 새로고침을 하면

등장!

 

전송 테스트

 

쿠키를 지우고

안 나타나는 상태에서 해보자

vscode

잘 온다!

 

즉 리다이랙션시 

쿠키 표시를 위해

path를 설정해주자!

 

setpath범위는 여기를 참고하자

https://dololak.tistory.com/546

 

[서블릿/JSP] 쿠키(Cookie)의 path 속성으로 전송 URL 지정하기

이전글 [서블릿/JSP] 쿠키(Cookie)의 domain 속성 설명. 쿠키 전송 범위 설정하기 [서블릿/JSP] Servlet/JSP 환경에서 쿠키(Cookie) 사용 방법 [서블릿/JSP] 쿠키(Cookie)에 한글 데이터 저장하고 가져오기 [HTTP]..

dololak.tistory.com