vue 로그인 상태 저장하기

vue 프로젝트를 진행하면서
로그인상태를 어디에 어떻게 저장할 것인가에 대한 고찰

1. app의 변수로 저장.
   app의 변수로 저장하는 방법의 장점은 상대적으로 보안이 뛰어나다는 점이다.
   탈취될 가능성이 낮기 때문에.
   하지만 다루기 힘들어 진다는 단점이 있다.
   새로고침시 정보가 날아간다.
2. vuex에 저장.
   변수로 저장하는 것과 같이 보안이 뛰어나고 상대적으로 다루기 쉬워진다.
   1과 마찬가지로 새로고침시 정보가 날아간다.(다만 vuex-persistedstate를 사용하면 localstrage에 정보를 같이 저장하므로 새로고침 하더라도 정보가 초기화 되지 않도록 할 수 있다.
   하지만 그러면 3의 단점처럼 보안은 상대적으로 떨어질 것이다.)
3. localstrage에 저장.
   보안적으로는 떨어지지만, 다루기 쉽다.

get-moim프로젝트에서는 로그인 때문에 저장해야 하는 정보가 3가지 였다.
1. user정보
2. access token.
3. refresh token.

내가 선택한 방법은
1, 2는 vuex에서 다루고, 3은 쿠키로 저장한다.
이렇게 하므로써 유저정보와 엑세스 토큰은 상대적으로 보안을 유지하고 새로고침시 리프레시 토큰을 이용해 매번 새로 유저 정보와 엑세스 토큰을 가져 올 수 있게 된다.

이때 생겼던 이슈 (아직 해결 못함)

새로고침 할 경우 모든 정보가 초기화 됐으므로 새로 백엔드 서버로 요청 하게 되는데,
이때 엑세스 토큰 또한 초기화 되어서 새로고침하며 실행되는 모든 http 요청이 axios intercepter에 의해 refresh token으로 access token을 요청하게 된다.

현재 생각하고 있는 해결 방안은 멀티 프로세싱의 세마포어 같은 플래그를 세워서 어떤 한 요청이 refresh token을 이용해 access token을 요청했을 때, 다른 요청들은 해당 요청이 완료 될때까지 기다리는 방법을 생각 하고 있는데, axios intercepter 안에서 이를 구현하는 방법을 고민중이다.