Nuxt.js Auth Refresh 작업

Updated on

백엔드 라라벨에서는 리프레쉬 토큰이 문제 없이 잘 작동한다..
그렇다면, 이제 Nuxt.js Auth에서 처리해줘야한다…

$axios 에서 헤더에 인증이 있다면, 새로운 토큰으로 바꿔주는 작업을 통해서…
아주 자연스럽게 토큰 세팅을 변경했으며, 정상적으로 끊어짐 없이 작동하는 것을 확인하였다.

하지만, 여기서 발생한 문제는… 새로고침 했을때의 문제이다 !!
새로고침하게되면, Auth에서는 해당 토큰으로 (아마 쿠키값이지 않을까?)
user 로 호출하게 된다… 그렇게 호출에 성공하면, 새로운 유저 데이터를 로컬 스토리지에 저장해서 보여주는 것 같다..
만약 실패할 경우에는, 기존 로컬 스토리지를 유지하기는 한다…
(여기서 resetOnError: true, 옵션을 줄 경우에는 서버 사이드에서 호출에 실패하면 auth.reset() 처리해서, 로컬 스토리지를 초기화시키고, 로그아웃 시켜버린다)

자… 로그아웃 되는거 좋다 이거야….. 근데 여기서 리프레쉬 시간이 된 다음에, 새로고침 할 경우에는 새로운 user 데이터가 payload에 담긴 토큰과 함께 데이터를 뿌려주는데..
payload된 데이터를 받아서 새로운 로컬 스토리지에 쓰는거 좋아 !

근데, 헤더에 리프레쉬 된 인증 토큰이 날아오는데, 이 녀석을 !! 잡아서 !! Auth에다가 새로운 토큰으로 세팅을 해야되는데, 이게 안되는거다…
내가 생각한건 플러그인에 Axios를 잡아 넣고, 거기에다가 서버에서 호출하면, 리스폰 받은 걸 고스란히 Auth에 등록시켜주려고 했다.. 하지만.. 이게 되질 않는다..
이유를 모르겠다…

앞으로 찾아볼 예정이다..
플러그인에서 ssr: true 해줘도, Auth는 사용이 안되는데..
https://auth.nuxtjs.org/api/options.html#plugins
https://auth.nuxtjs.org/recipes/extend.html
여기서 확인했다. 직접, auth에 플러그인을 추가할 경우에 사용이 가능하다고 한다..
그렇게, 플러그인에서 Auth를 사용할 수 있음을 확인했지만, 이럴 경우에는 Axios가 서버사이드에서는 작동이 안되는 문제가 발생한다.. (왜..?)

순서의 문제다. (어쨌든 호출의 문제)

나는 바보인가… 그냥 axios로 받아서 auth 토큰에 등록해주면 됬던 문제였다…
해결함. - _-