Reactjs React/Firebase如何检查已验证(导入或上下文)?

Reactjs React/Firebase如何检查已验证(导入或上下文)?,reactjs,firebase,Reactjs,Firebase,我在Firebase(firebaseui)中有一个带有身份验证的小型react应用程序。我的项目中有此文件: import * as firebase from 'firebase'; var firebaseConfig = { apiKey: '<apikey>', authDomain: 'mydomain', databaseURL: 'mydomain', projectId: 'mydomain', storageBucket: 'mydomain

我在Firebase(firebaseui)中有一个带有身份验证的小型react应用程序。我的项目中有此文件:

import * as firebase from 'firebase';

var firebaseConfig = {
  apiKey: '<apikey>',
  authDomain: 'mydomain',
  databaseURL: 'mydomain',
  projectId: 'mydomain',
  storageBucket: 'mydomain',
  messagingSenderId: 'mydomain',
  appId: 'mydomain'
};


firebase.initializeApp(firebaseConfig);

export default firebase;
export const auth = firebase.auth();
export const db = firebase.db; 
从“firebase”导入*作为firebase;
var firebaseConfig={
apiKey:“”,
authDomain:“mydomain”,
数据库URL:“mydomain”,
projectId:'mydomain',
storageBucket:“mydomain”,
messagingSenderId:'mydomain',
appId:“mydomain”
};
firebase.initializeApp(firebaseConfig);
导出默认firebase;
export const auth=firebase.auth();
export const db=firebase.db;
这确实有效,我导出了auth(即firebase.auth())和db。两者似乎都可以工作,我可以访问db和auth.currentUser

我还有一个上下文,它告诉我用户是否已登录:

import * as React from 'react';

import {auth} from '../../helpers/Firebase';

const defaultFirebaseContext = {
  authStatusReported: false,
  isUserSignedIn: false
};

export const FirebaseAuthContext = React.createContext(defaultFirebaseContext);

export default class FirebaseAuthProvider extends React.Component {

    state = defaultFirebaseContext;


    componentDidMount() {
      auth.onAuthStateChanged(user => this.setState({
        authStatusReported: true,
        isUserSignedIn: !!user
      }));
    }

    render(){
      const {children} = this.props;
      const {authStatusReported, isUserSignedIn} = this.state;
      return (
        <FirebaseAuthContext.Provider value={{isUserSignedIn, authStatusReported}}>
          {authStatusReported && children}
        </FirebaseAuthContext.Provider>
      );
    }
}
import*as React from'React';
从“../../helpers/Firebase”导入{auth};
常量defaultFirebaseContext={
作者:假,
isUserSignedIn:false
};
export const FirebaseAuthContext=React.createContext(defaultFirebaseContext);
导出默认类FirebaseAuthProvider扩展React.Component{
状态=defaultFirebaseContext;
componentDidMount(){
auth.onAuthStateChanged(用户=>this.setState({
作者:是的,
isUserSignedIn:!!用户
}));
}
render(){
const{children}=this.props;
const{authStatusReported,isUserSignedIn}=this.state;
返回(
{authStatusReported&&children}
);
}
}
我的问题是:什么时候用什么?因为看起来我可以在所有问题上使用第一个auth对象(
如果auth.currentUser!==null
),并且根本不使用上下文,或者这个auth对象根本不可靠?它应该是可靠的,因为您还拥有DB对象


谢谢你的帮助

用于检查用户是否已登录,
auth.currentUser!==空值
就足够了

firebase.auth().onAuthStateChanged
非常有用,例如,如果您希望在用户状态更改为注销后立即使用逻辑自动重定向到登录页面


创建指示用户登录状态的上下文是多余的

因此,我可以将此逻辑添加到第一个代码段(onAuthStateChanged->redirect)并删除上下文?因此,在react中,基本上我可以导出类的值和实例,并将它们用作缓存对象。那么需要什么样的背景呢?因此,基本上文件的缓存版本(这称为singleton?)充当缓存/上下文?有几个选项用于管理和共享
auth
状态。有关另一个示例,请参见: