Question

我的反应很新，希望您能帮助我。

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

我有一些想法，但我不知道如何实现。 Firebase给我提供了一个名为currentUser.getIdToken（）的方法，通过它我可以验证我是否具有活动令牌，但是该方法是一个应许，因此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} /> 
            );
        }
    
    }
}

Answer 1

对于Firebase身份验证，这实际上是一个令人沮丧的问题。无法同步检查您的用户是否已登录。

大多数人通过显示“正在加载”屏幕来解决此问题，直到检查完成：

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} /> 
            );
        }

    }
}

Firebase身份验证和React

1 个答案: