Firebase身份验证和反应 [英] Firebase Authentication & React

问题描述

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

I am new in react, I hope you can help me.

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

I'm using firebase authentication + react for a small application. I have a component to login and another when logged, with that there's no problem. The problem arises when I update the page, it shows me for a few seconds the login component even though it is already logged. I guess this happens because in my constructor I have a variable "user: null" and only in componentDidMount I use the "onAuthStateChanged" method that firebase gives me to change the value of the user.

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

I have something in mind but I don't know how to implement it. Firebase gives me a method called currentUser.getIdToken(), with this I can verify if I have an active token, but this method is a promise, so react doesn't recommend using this type of asynchronous methods in the constructor. But in the case of implementing it in the constructor, is it a good practice to use conditionals within a constructor variable?

谢谢！

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

推荐答案

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

This is actually quite a frustrating issue with Firebase authentication. There is no way to synchronously check if your user is logged in.

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

Most people get around this by showing a "loading" screen until the check is done:

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身份验证和反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！