reactjs - 如何在 firebase.auth().currentUser 上异步/等待？

Question

我正在使用 ReactJs，并定义了 Route这将加载 <Loans />如果路径是mywebsite.com/loans，则组件。以下是 <Loans /> 的代码片段成分。在 componentDidMount ，我有async/await获取currentUser来自firebase 。如果user是 null ，页面将重定向至/signin页。

class Loans extends Component {
  componentDidMount = async () => {
    const user = await firebase.auth().currentUser;
    if (!user) {
      this.props.history.push("/signin");
    }
  };
  render () {
  ...}
}

这是 <SignIn /> 的代码片段成分。在 SignIn组件，有一个监听器来监听任何身份验证状态更改，如果用户登录，页面将重定向到 /loans页。

class SignIn extends React.Component {
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.props.history.push("/loans");
      }
    });
  }

  render () {
    ...
  }
}

我实际上已经登录了。但是我观察到一个奇怪的行为，每当我刷新页面 /loans ，页面将重定向至/signin页面不到一秒钟，然后快速重定向回 /loans页。

我的问题是我是否已经有 firebase.auth().currentUser成为async/await ，我怎么还能得到null对于user在<Loans />组件，我只看到 <Loans />当页面从 <SignIn /> 重定向时的组件页？如果我的情况下已经有用户登录，我怎样才能避免看到登录页面。谢谢!

Answer 1

firebase.auth().currentUser 不是一个 promise ，它是一个 User 对象，因此对其使用 await 没有多大意义。根据API documentation ，它只会是一个 User 对象，或者为 null。当没有用户登录时，或者 User 对象尚不可用时，它将为 null。

您应该做的是在 SignIn 中使用相同风格的监听器来确定 User 对象何时准备就绪，并仅在该监听器指示用户存在后呈现任何内容。