axios와 jwt 토큰 관련으로 시도해본 방법을 정리해둔 글이다. 수정가능성 有
클라이언트에서 JWT 토큰 확인하기
서버에서 JWT 토큰을 전달하게 될 경우, res.data를 통해서 확인할 수 있다. (httpsonly 보안 설정으로 브라우저 내에서 개발자 콘솔로 확인이 불가능 하니 염두하도록 하자.)
// 아래 token을 accesstoken으로 활용하면 된다.
//res.data = { 서버가 보내준 키 : 서버가 보내준 값, token : jwt토큰 값 }
const accessToken = res.data;
axios.defaults.headers.common["Authorization"] = `Bearer ${accessToken.token}`;
//쿠키에 저장하기
document.cookie = `키이름=${accessToken.token}`;
- Authorizaiton
Ajax request를 이용해 cookie를 비롯한 credential을 주고받기 위해서는 request, response에 Authorization HTTP header set up이 필요
axios.post 발송시 하단 요청 추가
{withCredentials: true,
crossDomain: true,
credentials: "include",}samesite 이슈로 서버에 samesite = none 추가요청
하지만 HTTPS 프로토콜을 사용하시지 않는다면 sameSite = none을 설정하더라도 역시 쿠키가 보내지지 않는다. (로컬호스트에서 진행하는 경우는 예외) 서버를 HTTPS 서버로 만들어야 한다.
로그아웃 시, clearCookie가 되지 않는다.
로그아웃을 보내면 clearCookie 가 되지 않는 이슈
-
res.clearCookie function doesn't delete cookies
ㄴ res.clearCookie() doesn't work#691 -
jwt 방식 사용 시 로그아웃 관련 질문 : 한번 발생한 토큰은 수정/삭제가 불가능하다(만료시간까지!)
그럼 수동삭제를 하는게 아니라, 토큰이 만료되는 시간을 쿠키와 맞추는 방법을 시도해봐야할 듯하다. 토큰 만료시간은 현재 서버가 24시간 설정해뒀으므로, 발급 되는 순간 cookie의 만료시간이 24시간으로 동일하게 설정시키면 알아서 파괴되지 않을까 예상해본다.
axios 인터셉트 설정
전역 설정이 중첩 주소로 될 경우, header가 안보내지는 현상이 발생했다. axios 인터셉트 세팅을 시도해봤지만 진행이 되지 않아서 새로고침되는 페이지별로 쿠키에 저장된 header 값을 강제로 세팅해서 진행했다. 추후 다시 시도해봐야겠다.
jwt 토큰 클라이언트에서 확인하기
기타
차곡차곡 쌓아가는 나의 개발 기록