useLocation 과 useNavigate 훅
단일 페이지에서 로그인 토큰을 어떻게 가지고 있을지 많은 고민을 하게 되었다.
쿠키에 저장을 하자니 보안상에 이슈가 생길것 같은 걱정이 되어서
axios 초기 설정으로 바로 header 설정을 할수 있는 옵션이 있었다.
axios.defaults.headers 조건 이었는데 나중에 따로 정리해야겠다.
이를 통해서 초기 axios를 사용할때마다 header를 설정안해줘도 되었다.
단 문제는 새로고침 할때마다 이 값을 잃는다는 것이었다.
카카오 로그인 과 토큰 을 유지하는 거였는데 새로고침할때마다 토큰 값을 전달해줘야 하는데
토큰 값이 없다보니 카카오 로그인을 안한것처럼 작동되었다.
하지만 카카오 상에서는 로그인 된것이라서 다시 로그아웃 처리를 해줘야 했던게 문제였다.
이를 위해서 어떻게 해야 할지 고민하다가. useLocation과 useNavigate에 대해서 알게 되었다.
페이지간에 파라미터를 전달할수 있는 방법으로 사용되었는데 초기에 로그인 이후 recoil로 저장을 했었는데
이를 사용했어도 새로고침 할때마다 자꾸 recoil 값도 사라져서 이 방법을 사용하게 되었다.
useNavigate 를 사용하면
훅으로 첫번째 인자에 이동할 경로, 두번째 인자로 state 속성을 넣어줄수 있다.
navigate(‘경로’,{state:{key:value}}) 이렇게 사용하면 되었다.
이동할 경로에 파라미터를 전달해주는 것이었는데 마침 내가 제작한 페이지가 단일 페이지여서
url이 하나였고 나머지는 모달 형태였기 때문에 바로 사용해서 토큰 값을 저장해 주었고 이것을 다시 recoil로 저장을 해서 여러군데에서 호출해서 사용할수 있었다.
추가로 파라미터를 저장하는 방법은 navigate를 사용하는 것인데
useLocation 훅을 사용하면 저장한 값을 가져올수 있다.
const location = useLocation(); 으로 선언해주고
location.state 값에 접근하여 저장한 키값으로 값을 가져올수 있다.
location.state.키 이런 형식으로 접근하면 가져올수 있다.
값이 url 파람 값으로 보이지 않기 때문에 외부에서도 알수가 없고 접근할수가 없어서
보안상으로도 안전할것이라 생각이 든다.
그리고 중요하게 생각했던 새로고침 할때마다 토큰값을 잃었던 것을 해결할수 있게 되었다.
혼자 생각한것이라서 보안상의 이슈가 충분히 있을수 있다.
아직까지 검색 결과로는 괜찮은것 같아서 활용하고 있다.
