230130_TIL

오늘 공부한 내용

• 항해 99 실전프로젝트 

• 리프레시 토큰 재발급

어려웠던 내용

트러블슈팅

상황:

로그인을 했을 때 토큰을 재발급 하게 끔 설정했지만 페이지가 새로고침이 되었을 때는 로그인페이지에서 설정했던 것이 날라가게 됨을 확인.

 

 

프론트에서 만료시간을 확인하여 백엔드에 값을 요청하는 방식이었으나 방식을 바꾸게 됨

 

현재 리프레시 토큰을 발급받는 과정은 다음과 같음.

 

1. api 데이터 요청을 했을 때, 백엔드에서 401에러를 넘겨줌("너 만료된 토큰이야!").

2. 에러와 메시지를 확인한 후 프론트에서 리프레시 토큰을 재발급받을 api 경로로 요청.

3. 백엔드에서 받은 응답값으로 새로 accessToken 과 refreshToken 재 설정.

4. axios 요청

 

 

시도1

처음에는 시도를 하면서 백엔드와 연결하는 과정에서 여러 문제가 있었다. 백엔드에서 새로 발급한 코드를 프론트로 주었지만 다시 발급한 코드로 다시 확인하는 코드를 작성하지 않아 에러발생.

 

시도2.

백엔드에서 확인하는 코드를 작성한 후 다시 시도. 하지만 새로 발급받은 토큰들이 세션과 쿠키에 저장이 안되는 현상 발생. 

백엔드에서 응답값으로 보내주는 경로가 프론트가 설정해놓은 경로와 달라서 생긴 문제.

 

해결은 시도2의 상황에서 백엔드와 프론트 경로 설정을 해주니 완료됬었다. 문제해결을 하고나니 리프레시 토큰을 재발급받는 데에 중요한 포인트는 언제 리프레쉬토큰을 재 발급하냐는 것이었다고 생각한다. 만료된 토큰이더라도 api요청을 할때 axios의 인터셉터를 활용하여 토큰을 재발급받는 다는 것을 몰랐을 때는 그저 페이지가 새로고침 됬을 때 서버로 요청을 해야하나하면서 어리석은 생각을 했던 것 같다.