在 React 中，每次我刷新页面时，Firebase auth 用户都是空的

Question

我遇到了以下问题。我经历了几个与同一问题相关的 SO 问题和答案，但没有一个对我有用。

我正在使用 firebase.auth().onAuthStateChanged 来检查用户是否已经登录，但每当我刷新页面时，我总是让用户为空。

PFB代码

import React, { Component } from 'react';
import Header from './Header';
import Home from './Home/components/Home';
import Footer from './Footer/components/Footer';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
import { auth } from '../firebase/auth';
import Dashboard from './Dashboard/components/Dashboard';
import * as actions from '../actions/index';
import {Map, List, fromJS} from 'immutable';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      loading: true, 
      authenticated: false, 
      user: null
    }
  }

  componentDidMount() {

    auth.onAuthStateChanged(user => {
      //user is null every time I refresh the page
        if (user) {
        this.props.userLoading(false);
        this.props.authUser(true);
        this.props.storeUser(user.providerData);
        this.props.history.push('/dasboard');
      } else {
        this.props.userLoading(false);
        this.props.authUser(false);
        this.props.history.push('/');
      }
    });
  }

  componentWillUnMount(){
    this.unSubscribe();
  }

  render(){
    const { authenticated, loading } = this.state;
    return(
      <div>
        <Header />
        <Router>
          <div>
            <Route path='/' exact component={Home}/>
            <Route path='/dashboard' component={Dashboard} />
          </div>
        </Router>
        <Footer />
      </div>
    )
  }
}


const mapStateToProps = state => {
  const user = state.getIn(['user', 'data'], List());
  const authenticate = state.getIn(['user', 'auth'], false);
  const userLoading = state.getIn(['user', 'loading'], false);

  return {
    user,
    authenticate,
    userLoading
  };
}

const actionsToProps = {
  storeUser: actions.storeUser,
  authUser: actions.authUser,
  userLoading: actions.userLoading
}

export default withRouter(connect(mapStateToProps, actionsToProps)(App))

auth.js：

import firebase from './firebase';

export const auth = firebase.auth();

export const logout = firebase.auth().signOut();

export const githubProvider = firebase.firebase_.auth.GithubAuthProvider();

export const twitterProvider = new firebase.firebase_.auth.TwitterAuthProvider();

export const facebookProvider = new firebase.firebase_.auth.FacebookAuthProvider();

我使用的是 Firebase 5.8.3 版。

我尝试了很多可能性，例如使用 async await、setTimeout，但它们都不起作用。

Answer 1

您似乎要在 auth.js 中退出：

firebase.auth().signOut();

Firebase 将注销操作排队并在 Auth 实例准备好时运行它。