Vue.js|FirebaseのonAuthStateChangedを同期的に処理する


やりたいこと

  • Vue.jsでFirebaseのonAuthStateChangedを同期的に処理する
  • そのうえで、onAuthStateChangedで確認したuser_idを利用してFirestoreからデータ取得する条件値に設定する
  • Firestoreから正しくデータを取得する

実装

methods:配下に関数を作る

getUserId: function() {
      return new Promise(resolve => {
        const auth = getAuth();
        onAuthStateChanged(auth, (user) => {
          this.uid = user.uid;
          console.log('1');
          resolve();
        });
      });
    }

methods:配下にFirestoreからデータを取得する関数を作り、getUserId関数を呼び出す

getFirestoreData: async function() {
      // user_id取得
      await this.getUserId();
      console.log('2');
      const cRef = collection(db, 'test');
      // 取得したuser_idをここで利用できる
      // Promiseにしないとthis.uidが空となり、クエリが正しく動作しない
      const q = query(cRef, where('post_id', '==', this.id), where('user_id', '==', this.uid));
      const Snapshot = await getDocs(q);

      Snapshot.forEach((doc) => {
        if(doc.exists()) {
          console.log('成功')
        } else {
          console.log('失敗')
        }
      });

出力

1
2
成功 or 失敗