Question

我需要你的想法。

renderIt = () => {
    if(!this.state.user){
      return <Login />
    }else {
      return <Home />
    }
  }

我在这里检查用户是否已登录，如果未登录，则显示<Login />；当他自己登录时，则显示<Home />。

问题是，当我注销并刷新时，即使没有登录也能看到<Home/>页面不到一秒钟。

componentDidMount = () => {
      this.authListener();
  }

 authListener = () => {
    firebase
      .auth()
      .onAuthStateChanged((user) => user ? this.setState({user}) : this.setState({user: null}))
  }

Answer 1

这是因为!this.state.user最初为true，直到firebase auth完成工作之前，它都会向您显示<Home/>。

解决方案是首先使用加载（某些微调器动画）组件，直到Firebase身份验证完成

if(this.state.user===null){
//create Loading component first before using it here
  return <Loading />
}else if(!this.state.user){
  return <Login />
}else {
  return <Home />
}

这可能不是处理用户身份验证的更好方法，只是回答您的问题

Answer 2

问题出在您的初始状态，即：

class App extends Component {
  state = {
    user: {}
  }
  ...

由于您随后在渲染代码中检查了this.state.user，因此最终比较了!{}（false）。

我强烈建议您遵循以下规则，使代码尽可能简单：

this.state.user代表当前用户对象。
如果没有当前用户，则this.state.user是null。

在代码中：

class App extends Component {
  state = {
    user: null
  }

  componentDidMount = () => {
      this.authListener();
  }

  authListener = () => {
    firebase
      .auth()
      .onAuthStateChanged((user) => this.setState({user}));
  }
  ...

另请参见更新后的工作代码：https://stackblitz.com/edit/react-1bv4bb?file=src/App.js

重新整理网页时，Firebase Auth出现问题

2 个答案: