🛠 Firebase initialize 이슈 해결

1. Issue
   Vue의 라우터 가드를 이용해 로그인 유무에 따라 일부 페이지를 접근하지 못하게 아래와 같이 설정하였다. 하지만 currentUser의 값이 null로 받아짐에 따라 else로 빠지로 결국 라우터 가드가 제 기능을 못하는 상황에 놓였다.
   

2. Why it happened?
   
   firebase 매뉴얼을 보면 아래쪽에

   참고: auth 객체의 초기화가 완료되지 않아 currentUser가 null일 수도 있습니다. 관찰자를 사용해 사용자의 로그인 상태를 추적하면 이런 상황을 처리할 필요가 없습니다.

라는 정보가 있다.

매뉴얼 정보를 미루어보아.. 네비게이션 가드 beforeEach가 firebase의 초기화 전에 실행되었기 때문에 currentUser가 null을 받아온것 같다.

3. solve
   위 첨부이미지 상단을 보면

   관찰자를 사용하면 현재 사용자를 가져올 때 Auth 객체가 중간 단계(초기화 등)에 있지 않도록 할 수 있습니다.
   signInWithRedirect를 사용하면 onAuthStateChanged 관찰자는 getRedirectResult가 해결될 때까지 기다린 후에 트리거됩니다.

라는 문구가 보인다.
관찰자를 사용하면 현재 사용자를 가져올 때 Auth 객체가 중간 단계(초기화 등)에 있지 않도록 할 수 있다고 하는데 그 관찰자를 onAuthStateChanged라고 한다.

따라서 onAuthStateChanged 관찰자에 콜백을 넣고 firebase가 초기화 되었을때 vue앱을 초기화 해보도록 한다.

이렇게 하면 firebase auth 객체가 사용할 준비가 되었을때만 vue앱을 초기화 한다.