VueJS 및 Firebase: 페이지 새로 고침 후 사용자가 로그인했는지 확인

Question

저는 Vue 3와 Firebase 프레임워크를 사용하여 웹 애플리케이션을 개발하고 있습니다. 스트로에는 피니아(Pinia)를 사용합니다. 인증을 위해 저는 Firebase를 사용하고 있으며 지금까지는 훌륭하게 작동하며 사용자는 등록하고 로그인할 수 있습니다. 사용자가 로그인하면 해당 데이터는 pinia 저장소에 저장됩니다.

그러나 사용자가 로그인하고 페이지를 다시 로드하면 pinia 저장소에 있는 데이터가 손실됩니다. Firebase 함수 onAuthStateChanged()를 사용하면 사용자가 계속 로그인되어 있습니다.

저의 첫 번째 해결책은 앱이 실행되고 pinia 스토어에 필요한 데이터가 채워질 때마다 onAuthStateChanged() 함수를 호출하는 것이었습니다. Firebase 구성 파일에서 onAuthStateChanged() 함수를 호출해 보았으나 pinia 스토어가 아직 초기화되지 않았습니다.

Vue 애플리케이션의 어느 시점에서 onAuthStateChanged() 함수를 호출해야 사용자가 새로 고침 후 자동으로 로그인되고 Pinia 저장소에 사용자 데이터를 쓸 수 있습니다. ?

Answer 1

무엇을 시도하셨는지 잘 모르겠지만 이것이 효과가 있을 것이라는 것은 압니다. 물론 onAuthStateChanged를 스토어 외부로 이동할 수 있으며 여전히 작동합니다. store.user를 추적하고 UI를 업데이트하려면 관찰자나 계산된 소품을 사용해야 한다는 점을 기억하세요.

으아악