Firebase 身份验证和状态问题

Question

我是一名学习 React 的学生。我正在尝试创建一个网络应用程序，用户在查看任何内容之前必须使用 Google 登录。我从 github-notetaker 示例中的代码开始，并编辑了 Main.js。到目前为止，我正在 init() 方法中编写整个逻辑，并在 this.state 中设置 loggedIn 和 email 值。

import React from 'react';
import { RouteHandler } from 'react-router';
import Rebase from 're-base';

class Main extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loggedIn: props.loggedIn,
      email: props.email
    };
  }

  authDataCallback(authData) {
    if (authData) {
      console.log('User is already logged in.');
      console.log(authData["google"]["email"]); // works as expected
      this.setState({
        loggedIn: true,
        email: authData["google"]["email"]
      });
      console.log(this.state.email); // does not work as expected
    } else {

      this.setState({
        loggedIn: false
      });
      console.log('Attempting to authenticate user account');
      this.ref.authWithOAuthPopup('google', function (error, authData) {
        if (error) {
          console.log('Login Failed!', error);
        } else {
          console.log('Authenticated successfully');
        }
      }, {
        scope: "email"
      });
    }
  }
  init(){
    console.log('Init called');
    this.ref = new Firebase('https://myapp.firebaseio.com/');
    this.ref.onAuth(this.authDataCallback.bind(this));
  }

  componentWillMount(){
      this.router = this.context.router;
  }
  componentDidMount(){
    this.init();
  }
  componentWillReceiveProps(){
    this.init();
  }
  render(){
    if (!this.state.loggedIn) {
      return (
        <div className="main-container">
          <div className="container">
            <h3>You are not authenticated. <a href="">Login</a></h3>
          </div>
        </div>
      )
    } else {
      return (
        <div className="main-container">
          <div className="container">
            <RouteHandler {...this.props}/>
          </div>
        </div>
      )
    }
  }
};
Main.propTypes = {
  loggedIn: React.PropTypes.bool,
  email: React.PropTypes.string
};
Main.defaultProps = {
  loggedIn: false,
  email: ''
}
Main.contextTypes = {
  router: React.PropTypes.func.isRequired
};
export default Main;

我遇到了一个奇怪的错误，我相信我做错了。当用户认证成功后，所有的信息都会被保存，并写入用户的email。控制台日志如下所示： User is already logged in. address@email.com // corresponds to authData["google"]["email"] address@email.com // corresponds to this.state.email = CORRECT!!

然而，当我刷新页面时，新打印看起来像这样，并且电子邮件和对象似乎对我仍然可用，但没有保存在 this.state 中。 User is already logged in. address@email.com // corresponds to authData["google"]["email"] null

我目前正在学习 React，所以这可能是一个非常简单的错误。非常感谢您抽出宝贵时间并提前提供帮助。如果您能指出正确的方向或让我知道更好的方法，我将不胜感激。谢谢！

Answer 1

你写错了代码。 var currentAuthData = this.ref.getAuth(); 向 fireBase 发送请求以获取身份验证，但是下一行代码 if (currentAuthData) { 是运行，然后 fireBase 才能检索到正确的信息。您必须改用回调函数。

ref.onAuth(authDataCallback);

function authDataCallback(authData) {
  if (authData) {
    console.log('User is already logged in.');
  }
}

Answer 2

我相信我找到了问题的原因。当我在 render()

中调用以下代码时

<h1> {this.state.email} </h1>

它工作得很好。因此，我的结论是 console.log(this.state.email) 不知何故运行在 this.setState() 完全完成之前。

Firebase 身份验证和状态问题

Firebase Authentication and State Issue

javascript

state

firebase

reactjs

firebase-authentication