Question

我不确定这是否是我显示反应组件的方式是否有问题，具体取决于用户是否已登录，或者我使用firebase处理用户身份验证的方式是否有问题。基本上，一旦用户登录，他们就会被带回到登录页面，甚至无法查看要登陆的正确页面。这是我的代码，用于处理身份验证页面的显示

class Portal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: {},
    }
  }

  componentDidMount() {
    this.authListener()
  }

  authListener = () => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user })
        console.log(user)
      } else {
        this.setState({ user: null })
        console.log(user)
      }
    })
  }

  loginHandler = (username, password) => {
    firebase.auth().signInWithEmailAndPassword(username, password).then(() => {
    }).catch((err) => {
      console.error(err)
    })
  }

  logoutHandler = () => {
    firebase.auth().signOut()
  }

  render() {
    return (
      <div>
        {this.state.user ?
          (<PortalMain
            logoutHandler={this.logoutHandler}
          />) :

          (<Login
            loginHandler={this.loginHandler}
          />)}
      </div>
    )
  }
}

export default Portal

Answer 1

问题在于浏览器在提交表单时自动刷新。我通过在提交功能的开头添加event.preventDefault()来解决了这个问题。

Firebase身份验证立即注销用户

1 个答案: