Javascript 为什么刷新时Firebase用户不再经过身份验证？

一个非常简单的应用程序。在

/

路径中，我希望在登录时呈现

Home

，如果未登录，则呈现

Introduction

。在登录页面上登录有效，如果i console.log（firebase.auth（）.currentUser）显示所有数据，并且在

/

上正确呈现

主页。因此，当仍然处于
/
路径时，一些奇怪的事情发生了；当我刷新页面时，我们不再登录，它会呈现
简介
。但是当我点击链接
主页
时，
主页
组件正确呈现，我们再次登录。为什么会这样

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom';
import firebase from './firebase'

import Home from './containers/home'
import Login from './containers/login'
import Register from './containers/register'
import Dashboard from './containers/dashboard'

const Protected = ({component: Component, ...rest}) => (
  <Route {...rest} render={(props) => {
    if(firebase.auth().currentUser) 
      return <Component {...props} />
     else 
      return <Redirect to='/register' />

  }} />
)

const Introduction = props => ( <h1>hello</h1>)

class App extends Component {


  render() {
    return (
      <Router>
        <React.Fragment>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/register'>Register</Link></li>
            <li><Link to='/login'>login</Link></li>
            <li><Link to='/dashboard'>dashboard</Link></li>
          </ul>
          <Switch>
            <Route path='/' exact render={(props) => {
              if(firebase.auth().currentUser) 
                return <Home {...props} />
              else
                return <Introduction {...props} />
              }
            } />
            <Route path='/register' exact component={Register} />
            <Route path='/login' component={Login} />
            <Protected path='/dashboard' component={Dashboard} />
          </Switch>
        </React.Fragment>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link，Redirect}；
从“/firebase”导入firebase
从“./containers/Home”导入主页
从“./containers/Login”导入登录名
从“./containers/Register”导入寄存器
从“./containers/Dashboard”导入仪表板
const Protected=（{component:component，…rest}）=>(
{
if（firebase.auth（）.currentUser）
返回
其他的
返回
}} />
)
const Introduction=props=>（您好）
类应用程序扩展组件{
render（）{
返回(

家
登记册
登录
仪表板

{
if（firebase.auth（）.currentUser）
返回
其他的
返回
}
} />
);
}
}
导出默认应用程序；
以下是发生的情况：


网页加载
Firebase启动一个请求以检查用户是否经过身份验证
应用程序显示，
currentUser
为空
身份验证状态更改，但应用程序不会重新呈现

应用程序需要侦听身份验证状态的更改，并相应地执行重新渲染

如果使用经过身份验证的路由并将用户重定向到登录页面，则此行为会出现问题。应用程序呈现，当前用户为空，在firebase有机会初始化之前重定向到登录页面。我不确定是否理解。它最初可能会显示一个登录页面，但如果用户经过身份验证，状态将更新并显示仪表板。您建议的替代方案是什么？@kindaro除了在react中呈现任何内容之前等待登录状态之外，我不知道还有什么解决方案（仍在寻找）。如果是SPA，您提到的是好的（flash登录页面，然后在状态后刷新到登录页面），但如果您将用户重定向到单独的登录URL，则会出现问题。
class App extends React.Component {
  state = {
    currentUser: null
  }

  componentDidMount() {
    this.unsubscribe = firebase.auth().onAuthStateChanged(currentUser => {
      this.setState({ currentUser })
    })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  render() {
    // use this.state.currentUser
  }
}