nuxt.js axios cookie send 문제 그래서 LocalStorage

대굴빡이 박살날 것 같다..
nuxt.js 에서 axios 로 cookie 전송에 대한 문제점에 대해서 이야기이다.

나의 서버 환경은 nuxt.js + laravel api 이다.
jwt 로 되어 있으며, nuxt auth 모듈을 사용함.

특정 페이지에서 설정 값을 기억하기 위해서, cookie 를 사용하려고 했다.
근데 일단, 서버측 cors 는 이미 API 때메 설정이 되어 있는 상태이다.

새로고침으로 asyncData로 호출했을때에는, cookie 값이 처음에 잘 전송된다. 그 이유는 nuxt-auth 모듈에 의해서 jwt가 살아있는지 체크하면서, 가지고 있는 쿠키값을 모두 전송하기 때문이였다.

하지만, 페이지 이동을 통해서 호출되는 asyncData에서는 axios 로 쿠키값이 전달되지 않았다.

뭐 이래저래, 찾아봤지만,, 잘 나오지 않았고 판단은 이러했다.
axios 에서 credentials: true, 옵션을 켜주고, cors에서도 ‘supportsCredentials’ => false, 를 켜줘야한다.

자, 그래 여기까지 잘 왔다. 근데 이 다음이 문제다. nuxt cookie module 을 사용했는데, 이제 생성 도메인에 따라서 axios 가 보낼때 자기가 직접 걸러버린다.

즉, axios url 이 api.도메인 이라면, .도메인에 해당하는 쿠키값만 전송한다.
그래서 일일히 쿠키를 생성할때에 domain 옵션에 .도메인 을 입력해줘야만 했다.
(여기서 일단 조금 마음에 안들었음… 그 이유는, 쿠키 생성하는 부분에서 도메인을 일일히 입력해줘야 했었고, env 로 처리하면 앞에 .가 붙지 않는 문제가 있었음,)

그러다가, 찾아본 결과, LocalStorage 라는 것을 발견했다.
생각보다, 옵션이나 이런 브라우저에 저장해야되는 것들을 전부 로컬스토리지에 저장하는 경우가 많았다.

그래서, Cookie를 일일히 저장하고 진행할 바에는, 어차피 중요한 것도 아니고, 브라우저에서만 저장되어야 하고, 그리고 특정 데이터를 받을때, 브라우저가 원하는 옵션 값을 서버로 보내야하는 상황이였기에,

Cookie 사용을 안하기로 생각했다.
Local Storage에 저장하고, 서버로 호출할때에, Auth bearer 처럼 Header에 데이터를 넣어서 보내볼 생각이다.. 헤더에 안되면.. POST로 해야되려나.. 흠..

추가보충) 와.. 너무 안되서 한숨 자고 왔음… 일단 추가보충하자면, Local storage 안된다.
왜냐면, SSR이기때문에, 새로고침할때 서버렌더링 단계에서 Local storage 를 사용할 수가 없다.

https://www.toptal.com/vue-js/server-side-rendered-vue-js-using-nuxt-js
https://stackoverflow.com/questions/54234416/how-to-get-localstorage-data-inside-vuex-state-with-nuxt-js

좀 알아보니, local storage는 mounted 이전에는 사용할 수가 없다고 한다.
당연한듯, 브라우저 데이터니까..
그렇다면, cookie를 사용할 수 밖에 없겠더라..

근데 도메인이니 뭐니.. 설정하는 부분도 있고 해서, 그냥 cookie 에 데이터를 저장하고, Header 에 쿠키 데이터를 담아서 보내주기로 결정했다..

이게 맞는지 잘모르겠는데,, 이거때문에 너무 시간 소비하는거 같아서, 일단 이렇게 땜빵하고 진행한다…

솔직히 Vue.js 도 처음이고 Nuxt.js 도 처음인데, 대한민국에서 nuxt.js 개발자 있긴 한건가 ? 글도 없고 내용도 없고, 심지어 일본에서 더 많이 사용하는거 같다.. 일본어로 작성된 글들 보고서 많이 도움 받았음..

그러다 보니 느끼는건, 일본 IT쪽으로는 우리보다 별로일거라 생각했는데, 웹사이트(?) 수준이 좋은 곳들이 많은듯했다.