使用 async/await 获取 firebase.auth().currentUser

Question

我成功使用 onAuthStateChange 观察者检查用户的身份验证状态，并将用户重定向到仪表板页面（react-native 项目）。但是，在仪表板上我已经想显示一些用户特定的数据，例如注册课程/统计数据。为此，我需要初始化和填充 currentUser 对象，这需要一些时间（我需要从那里获取 uid 以从数据库获取一些数据）。因此，我正在寻找某种方法来等待该过程成功完成。我试图在 componentDidMount 中使用 async/await 语法，但返回的结果为 null。 （相同的语法在其他屏幕中成功运行，但在第一个屏幕中失败）

async componentDidMount() {
  try {
    let uid = await firebase.auth().currentUser.uid;
    console.log(uid);
  } catch(error) {
    console.log(error);
  }
}

等待使用 async/await 语法加载 currentUser 对象的最佳方法是什么？我相信原因可能是 firebase 返回 null 作为第一个结果，然后将正确的 uid 作为第二个结果。

目前的解决方法是，我使用简单的 setInterval 函数，但我不想增加太多加载时间。

  let waitForCurrentUser = setInterval(() => {
    if ( firebase.auth().currentUser.uid !== null ) {
        clearInterval(waitForCurrentUser);
        let uid = firebase.auth().currentUser.uid;
        this.setState({uid});
        return firebase.auth().currentUser.uid;
    } else {
      console.log('Wait for it');
    }
  }, 700);

Answer 1

setInterval 的等价物是：

//calling the asynchronous function
  waitForCurrentUser(function(uid){
   if(uid)
   console.log('the user id is',uid)
  })

   async waitForCurrentUser(userIdIs){

    try {
       let uid = await firebase.auth().currentUser.uid;
       if(uid)
       {
         clearInterval(waitForCurrentUser);        
         this.setState({uid});
         userIdIs(uid); 
       }
       else {
       console.log('Wait for it');
      }

    }

    catch(e){
     console.log(e)
    }

  //  return userIdIs(uid);//returns promise
  };

干杯:)

Answer 2

export async function getAuthUserID(): Promise<string | undefined> {
  return await new Promise( (resolve, reject) => {
    firebase.auth().onIdTokenChanged(async (user) => {
      if (!user) {
        resolve(undefined);
      } else {
        resolve(user.uid);
      }
})
  }).then((uid: string | undefined)=>uid).catch(function(e) {
    throw (e);
  });
}

Answer 3

// sleep function
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getCurrentUser() {
  while (!auth.currentUser)
    await sleep(100);
  return auth.currentUser;
}

getCurrentUser().then(console.log)

说明：等到 currentUser attr 不再为“null”，然后再使用 while 循环和 sleep 函数返回它。

Answer 4

在 Firebase v10 中，通过利用返回 Promise 的

authStateReady

方法，我们可以确定何时用

currentUser

填充 auth 对象：

1.与

promise.then()

:

import { getAuth } from 'firebase/auth';

// In your component:
  useEffect(() => {
    const auth = getAuth();
    auth.authStateReady().then(() => {
      // Do whatever you want here ...

      // E.g. checking whether the user is logged in or not:
      setIsAuthReady(true);
      if (auth.currentUser) {
        setIsLoggedIn(true);
      }
      // End of E.g.

    });
  }, []);

2.与

await promise

:

使用

await

关键字也是一种选择，因为响应是一个承诺：

import { getAuth } from 'firebase/auth';

// In your component:
  useEffect(() => {
    const auth = getAuth();

    const checkAuthState = async () => {
      await auth.authStateReady();
      // Do whatever you want here ...

      // E.g. checking whether the user is logged in or not:
      setIsAuthReady(true);
      if (auth.currentUser) {
        setIsLoggedIn(true);
      }
      // End of E.g.
    };

    checkAuthState();
  }, []);

Answer 5

async getUid() {
        let user = await firebaseApp.auth().currentUser;
        let email = await user.uid;
}

希望对你有用