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

查看：23
本文介绍了使用 React 组件登录 Firebase的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基本思想是在 React 中进行 Firebase 登录.

组件自行呈现，但它们不协同工作.主要问题是在调用 onAuthStateChanged() 方法后，渲染函数不会采用新"状态.我究竟做错了什么?

非常感谢你们！

var Login = React.createClass ({getInitialState: 函数(){返回{登录:'假'}；},句柄登录:函数(事件){var email = document.getElementById('email').value;var password = document.getElementById('password').value;firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {//错误处理var errorCode = error.code;var errorMessage = error.message;//[...错误处理...]});this.setState({ 登录: '真' });},认证用户:函数(x){//初始化变量配置 = {[...配置的东西...]};firebase.initializeApp(config);//检查是否已登录firebase.auth().onAuthStateChanged(function(user) {如果(用户){//用户已登录console.log('authenticateUser(): true');this.setState({ 登录: '真' });}别的 {//用户已退出console.log('authenticateUser(): false');this.setState({ 登录: '假' });}});},whichWindowToShow:函数(){如果 (this.state.loggedIn === '未知'){返回 (<div><加载类型='气泡'颜色='#e3e3e3'/>

);}否则如果(this.state.loggedIn === '真'){返回 (<div><后端/>

);}别的 {返回 (<div className="login_wrapper"><div className="login_box"><h1>会员登录</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}>登录</button>

);}},渲染:函数(){this.authenticateUser();返回 (<div>{ this.whichWindowToShow() }

);}});//结束登录

解决方案

对于所有遇到相同问题/挑战的人:

这会起作用(.bind(this) 确实修复了范围).

还应应用于所有其他 Firebase 侦听器(例如 .on("value"))

firebase.auth().onAuthStateChanged(function(user) {如果(用户){this.setState({ 登录:真"});}别的 {this.setState({ 登录:假"});}}.bind(this));

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 will work ( .bind(this) does fix the scope).

Should also be applied on all other Firebase listeners ( .on("value") for example )

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    this.setState({ loggedIn: "true" });
  }
  else {
    this.setState({ loggedIn: "false" });
  }
}.bind(this));

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆