IT技术 - Firebase 身份验证和react - 吾爱随笔录

我是react的新手，我希望你能帮助我。

我正在使用 firebase 身份验证 + 对一个小应用程序做出react。我有一个要登录的组件，另一个在登录时，没有问题。当我更新页面时出现问题，即使它已经被记录，它也会向我显示登录组件几秒钟。我猜这是因为在我的构造函数中我有一个变量“user：null”，并且仅在 componentDidMount 中我使用 firebase 给我的“onAuthStateChanged”方法来更改用户的值。

我有一些想法，但我不知道如何实施。Firebase 给了我一个名为 currentUser.getIdToken() 的方法，通过这个我可以验证我是否有一个活动令牌，但这个方法是一个Promise，所以 react 不建议在构造函数中使用这种类型的异步方法。但是在构造函数中实现它的情况下，在构造函数变量中使用条件是一个好习惯吗？

谢谢！

import React, { Component } from 'react';
import firebase from 'firebase';
import Main from './MainComponent'
import Login from './LoginComponent'

export default class Main extends Component {

    constructor() {
        super();
        this.state = {
            user: null
        };
    }

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

    render() {
        if(!this.state.user) {  
            return(
                <Login />               
            );
        }        
        else {
            return(    
                <MainComponent user={this.state.user} /> 
            );
        }
    
    }
}

import React, { Component } from 'react'; import firebase from 'firebase'; import Main from './MainComponent' import Login from './LoginComponent' export default class Main extends Component { constructor() { super(); this.state = { hasCheckedLogin: false, user: null }; } componentDidMount() { firebase.auth().onAuthStateChanged(user => { this.setState({user: user, hasCheckedLogin: true}); }); } render() { // Hasn't checked login yet, show a loading message if(!this.state.hasCheckedLogin) { return <Loading />: } // Has checked login, but user isn't authenticated if(!this.state.user) { return( <Login /> ); } // Has checked login, and user is authenticated else { return( <MainComponent user={this.state.user} /> ); } } }