토큰이 만료되었을 때 로그인화면으로 돌아가는 부분을 구현하다가 정리를 해놓기로 했다.
react jsx 컴포넌트에서는 useHistory() 를 이용해 해결했을 텐데, axios instance 에서 작업할 부분이라 react hooks 는 사용하지 못했다.
history 와 location 모두 window 자식 객체라 어느것을 쓰든 별 상관이 없겠다 싶어서 가장 많이 쓰는 location 을 사용했다.
window.location.href = '로그인페이지 경로';
//or
window.location.replace('로그인페이지 경로');위처럼 코드를 사용하다보니, 전체 url 을 알아야하는데 호출한 api 결괏값에 있는 경로만 사용하여 처리하고 싶었다. (api response 에는 '/test/test2' 이런식으로 이동할 경로가 나오는 상태)
그래서 가장 많이 사용하진 않지만, useHistory() 와 거의 비슷하기도 하고 내가 원하는 사용법에 더 가까운 history 를 사용했다.
로그인페이지로 이동됐을 때는 이미 토큰이 만료된 이후라 뒤로가기 버튼이 활성화될 필요가 없다고 판단해서 history.replaceState() 를 사용하기로 했다.
아래는 그 사용방법이다.
history.replaceState({ data: 'testData' }, null, '로그인페이지 경로')
// 첫번째 인자는 데이터 객체를 전달 가능하며 history.state에 저장되어 사용할 수 있다.
// 두번째 인자는 해당 페이지의 제목 변경이 가능한데 브라우저에서 기능이 구현되어 있지 않아 null을 전달하면 된다.
// 세번째 인자는 변경할 url 주소를 넣어주면 된다. 단순한 경로 이동도 가능하고 querystring도 추가할 수 있기 때문에 유용하게 사용가능.참고: https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState
