문제 상황
클라이언트에서 요청을 보낼 때 미들웨어에서 accessToken, refreshToken을 모두 찾을 수 없을 경우, 로그인 페이지로 리다이렉트를 진행하고자 함
하지만, 네트워크 탭을 확인하면 리다이렉트 후, 로그인 페이지로 이동이 잘 되었고 response에도 /signin의 HTML이 표시되고 있음. 하지만 브라우저의 화면은 변하지 않음
시도한 방법과 한계
시도한 방법 | 한계 |
클라이언트 컴포넌트에서 에러 처리 | 상태코드가 넘어오지 않아서 에러처리 불가 |
요청 헤더에 accessToken을 넣지 않고 요청을 보냈을 때 백엔드로부터 받은 에러 코드로 에러처리 | 에러메시지, 에러코드 없이 403 상태코드만 내려오기 때문에, 클라이언트에서 이 코드가 토큰 에러인지 다른 에러인지 구분해줄 수 없음. 따라서 router.push('/signin') 등의 처리 불가 |
원인
•
api 요청과 페이지의 요청을 미들웨어에서 동일하게 처리하고 있어, 클라이언트 사이드 네비게이션과 서버 사이드 리다이렉션이 충돌함
해결
api 요청과 페이지 요청을 구분해서 미들웨어가 동작하도록 코드를 수정
•
클라이언트 컴포넌트에서는 401 에러가 넘어왔을 때에 대한 에러 처리를 통해 로그인 페이지로 이동시킴
interceptor 기능을 활용하여 401 에러 시 로그인 페이지로 리다이렉트 하는 작업 수행 예정