时间戳

首页 > 解决方案 > React/Firebase 如何检查经过身份验证的（导入或上下文）？

reactjs - React/Firebase 如何检查经过身份验证的（导入或上下文）？

问题描述

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

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;

这确实有效，我导出了 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>
      );
    }
}

我的问题是：什么时候用什么？因为看起来我可以只使用第一个身份验证对象来解决我的所有问题（if auth.currentUser !== null）并且根本不使用上下文，或者这个身份验证对象根本不可靠？它应该是可靠的，因为您还拥有 DB 对象。

任何帮助表示赞赏！

标签： reactjsfirebase

解决方案

对于检查用户是否登录，auth.currentUser !== null就足够了。

firebase.auth().onAuthStateChanged很有用，例如，如果您希望在用户状态更改为已注销时自动重定向到登录页面的逻辑。

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

推荐阅读