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 失敗
Author And Source
この問題について(Vue.js|FirebaseのonAuthStateChangedを同期的に処理する), 我々は、より多くの情報をここで見つけました https://zenn.dev/knj/articles/9e1c54ae5b9ac2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol