使用React组件进行Firebase登录 [英] Firebase Login with React Components

问题描述

基本的想法是在React中进行Firebase登录。

组件呈现自己，但是它们不能一起工作。主要的问题是在调用onAuthStateChanged（）方法之后，渲染函数不会采用«new»状态。我究竟做错了什么？

非常感谢你们！

  var Login = React。 createClass（{
 
 getInitialState：function（）{
 return {loggedIn：'false'}; 
}，
 
 handleLogIn：function（event） {
 
 var email = document.getElementById（'email'）。value; 
 var password = document.getElementById（'password'）。value; 
 
 firebase （错误）{
 //错误处理
 var errorCode = error.code; 
 var errorMessage = error.message; 
 
 // [...错误处理...] 
 
}）; 
 
 this.setState（{loggedIn：'true'}） ; 
 
}，
 
 authenticateUser：function（x）{
 
 //初始化
 var config = {
 [ ... config stuff ...] 
}; 
 firebase.initializeApp（config）; 
 
 //检查签名是否在
f irebase.auth（）。onAuthStateChanged（function（user）{
 if（user）{
 //用户签名
 console.log（'authenticateUser（）：true'）; 
 this.setState（{loggedIn：'true'}）; 
 
 else {
 //用户签出
 console.log（'authenticateUser（）：false'）; 
 this.setState（{loggedIn：'false'}）; 
} 
}）; （
），
 
 whichWindowToShow：function（）{
 if（this.state.loggedIn ==='unknown'）{
 return（
 < ; div> 
< Loading type ='bubbles'color ='＃e3e3e3'/> 
< / div> 
）; 
 
 else if（this.state.loggedIn ==='true'）{
 return（
< div> 
< Backend /> 
< / div> 
）; 
 
 $ {b $ b $（
< div className =login_wrapper> 
< div className =login_box> 
< b< ; h1>会员登录< / h1> 
< div className =login_fields> 
< input type =textid =emailname =email /> 
< input type =passwordid =passwordname =passwordplaceholder =password/> 
 < 
 
 
 
 render：function（）{
 this.authenticateUser（）; 
 return（
< div> 
 {this.whichWindowToShow（）} 
< / div> 
）; 
} 
}）; // END LOGIN 
  

解决方案

挑战，

这是最终的解决方案

The basic idea is to make a Firebase Login in React.

The components render itself, but they're not working together. The main problem is that the render function doesn't take the «new» states, after the onAuthStateChanged() method is called. What am I doing wrong?

Thank you a lot guys!

var Login = React.createClass ({

  getInitialState: function(){
        return { loggedIn: 'false' };
    },

    handleLogIn: function(event){

      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;

      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        // ERROR HANDLING
        var errorCode = error.code;
        var errorMessage = error.message; 

        // [... error handling ...]   

      });

      this.setState({ loggedIn: 'true' });

    },

  authenticateUser: function(x){

    // INITIALIZATION
    var config = {
      [ ... config stuff ... ]
    };
    firebase.initializeApp(config);

    //CHECKING IF SIGNED IN
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // USER IS SIGNED IN
        console.log('authenticateUser(): true');
        this.setState({ loggedIn: 'true' });
      }
      else {
        // USER IS SIGNED OUT
        console.log('authenticateUser(): false');
        this.setState({ loggedIn: 'false' });
      }
    });
  },

  whichWindowToShow: function() {
    if (this.state.loggedIn === 'unknown'){
      return (
        <div>
        <Loading type='bubbles' color='#e3e3e3' />
        </div>
      );
    }
    else if (this.state.loggedIn === 'true'){
      return (
        <div>
        <Backend />
        </div>
      );
    }
    else {
      return (
        <div className="login_wrapper">
        <div className="login_box">
        <h1>Member Login</h1>
          <div className="login_fields">
            <input type="text" id="email" name="email" placeholder="mail"/>
            <input type="password" id="password" name="password" placeholder="password"/>
            <button id="signin" name="signin" onClick={this.handleLogIn}>Login</button>
          </div>
        </div>
        </div>
      );
    }
  },

  render: function() {
    this.authenticateUser();
    return (
      <div>
        { this.whichWindowToShow() }
      </div>
    );
  }
}); // END LOGIN

解决方案

For all with the same problem/challenge,

THIS is the ULTIMATE FINAL SOLUTION

这篇关于使用React组件进行Firebase登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！