Javascript firebase.auth.currentUser在表单中输入内容之前返回null

我正在使用firebase和react router v4编写我的web应用程序

该应用程序有两个页面：LoginPage和ProfilePage

当用户登录时，如果用户试图访问登录页面，我想将其重定向到ProfilePage。当用户未登录时，如果用户试图访问ProfilePage，我希望将其重定向到LoginPage

在LoginPage渲染方法中：

render() {
        console.log("login status: " + !!firebase.auth().currentUser);

        if (firebase.auth().currentUser) {
            console.log("login");
            return <Redirect to='/profile' push/>
        }
        return (
            <div className="container">
                <form onSubmit={this.handleSubmit}>

                    <h1>Login</h1>
                    <label>
                        Username
                        <input type="text" value={this.state.email} onChange={(event) => this.setState({email: event.target.value})} />
                    </label>
                    <label>
                        Password
                        <input type="password" value={this.state.password} onChange={(event) => this.setState({password: event.target.value})} />
                    </label>
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }

render() {
        console.log("login status: " + !!firebase.auth().currentUser);

        if (!firebase.auth().currentUser) {
            console.log("profile");
            return <Redirect to={'/login'} push/>
        }
        return (
            <div><h1>Profile</h1></div>
        );
    }

在ProfilePage呈现方法中：

render() {
        console.log("login status: " + !!firebase.auth().currentUser);

        if (firebase.auth().currentUser) {
            console.log("login");
            return <Redirect to='/profile' push/>
        }
        return (
            <div className="container">
                <form onSubmit={this.handleSubmit}>

                    <h1>Login</h1>
                    <label>
                        Username
                        <input type="text" value={this.state.email} onChange={(event) => this.setState({email: event.target.value})} />
                    </label>
                    <label>
                        Password
                        <input type="password" value={this.state.password} onChange={(event) => this.setState({password: event.target.value})} />
                    </label>
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }

render() {
        console.log("login status: " + !!firebase.auth().currentUser);

        if (!firebase.auth().currentUser) {
            console.log("profile");
            return <Redirect to={'/login'} push/>
        }
        return (
            <div><h1>Profile</h1></div>
        );
    }

问题是： 在登录页面中，在我登录并刷新页面后，currentUser为null。在我在用户名文本字段中输入内容之前，currentUser将是一个对象，它将把我重定向到ProfilePage

期望： 如果用户已登录，当用户访问登录页面时，应立即将用户重定向到Profile页面。

问题似乎是： 刷新页面时，firebase.auth.currentUser不会立即更新

我在index.js中添加了firebase.auth.onAuthStateChanged方法。当auth状态更改时，我调用forceUpdate方法强制组件重新渲染

componentWillMount() {
        firebase.auth().onAuthStateChanged(
            (user) => {
                this.forceUpdate();
                console.log("onAuthStateChanged: " + !!user);
            }
        );
    }

问题似乎是： 刷新页面时，firebase.auth.currentUser不会立即更新

我在index.js中添加了firebase.auth.onAuthStateChanged方法。当auth状态更改时，我调用forceUpdate方法强制组件重新渲染

componentWillMount() {
        firebase.auth().onAuthStateChanged(
            (user) => {
                this.forceUpdate();
                console.log("onAuthStateChanged: " + !!user);
            }
        );
    }

---

我有一篇关于的最佳实践的博文。我有一篇关于的最佳实践的博文。