react JWT 토큰 저장, 가져오기

쿠키 훅 등록

위와 같이 useCookies를 가져와서 훅으로 등록 해준다.

react-cookie 설치 : npm i react-cookie

const [cookie, setCookie, removeCookie] = useCookies(['id'])
cookie : 쿠키 변수
setCookie : 쿠키 변수 등록
removeCookie : 쿠키 삭제
'id' : id라는 이름으로 쿠키 변수 생성

쿠기 저장 및 조회

이후, 백엔드에 jwt 토큰 요청 후, 받은 토큰을 setCookie(저장할 이름, 값)으로 저장하며, 저장된 쿠키 값을 꺼낼 때는 

const [cookie] = setCookie(["id"]) // 
...
console.log(cookie.id)

이런식으로 사용해주면 된다.

Axios로 JWT 보내기 (스프링 서버)

axios의 config 안에 headers: Cookie 객체를 추가해서 보내준다.

토큰값 요청 후, axios 헤더에 Default로 등록하기

axios.defaults.headers.common[key 값]에 저장시켜주면, 이후 요청할 때마다 header에 추가해주지 않아도 된다.

참고 출처

https://jrepository.tistory.com/m/65

https://dev-racoon.tistory.com/10