Question

我正在React Redux应用程序中实现Firebase身份验证。

问题： 我遇到了一个问题，该问题使我无法使用React的组件生命周期方法来支持条件渲染。

在页面之间导航时，加载每个页面/组件时，初始 cUser （当前用户）状态为null。这是因为等待Firebase的“ onAuthStateChanged”方法解决并在Redux中更新 cUser （当前用户）状态会有些延迟。在状态有机会被当前用户更新之前加载组件。毫不奇怪，因为这是一个异步过程。

问题： 处理此问题的最佳方法是什么？

有很多方法可以解决此问题，但是使用组件生命周期方法会更有效率。

我见过2016年的相关文章，指示检查localStorage，但是访问localStorage时，似乎与Firebase没有任何关系。我假设Firebase不再将用户数据存储在localStorage中。

代码：

我的App组件调用“ onAuthStateChanged” Firebase方法。

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';

import { firebase } from '../firebase';
import * as actions from '../actions';
import '../styles/styles.css';
import { LOBBY, HISTORY, TOPS, LANDING, SIGN_UP, SIGN_IN, FORGOT_PASSWORD, ACCOUNT, SIGN_OUT } from '../config/routes';

import Header from './Header';
import Footer from './Footer';
import Lobby from './Lobby';
import History from './History';
import Tops from './Tops';

import Landing from './registration/Landing';
import SignIn from './registration/SignIn';
import SignUp from './registration/SignUp';
import SignOut from './registration/SignOut';
import Account from './Account';
import ForgotPassword from './registration/ForgotPassword';


class App extends Component {
  componentDidMount() {
    console.log(Object.keys(localStorage));
    const { signOutUser, updateUserAuth } = this.props;

    firebase.auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        updateUserAuth(authUser);
      } else {
        signOutUser();
      }
    });
  }
  checkAuth() {
    if (this.props.cUser) {
      return <Header />;
    }
    return null;
  }

  render() {
    console.log('cUser: from APP', this.props.cUser);
    return (
      <div className="lightGray">
        <div className="container ">
          <BrowserRouter>
            <div>
              {this.checkAuth()}
              <Route exact path={LOBBY} component={Lobby} />
              <Route exact path={HISTORY} component={History} />
              <Route exact path={TOPS} component={Tops} />

              <Route exact path={LANDING} component={Landing} />
              <Route exact path={SIGN_UP} component={SignUp} />
              <Route exact path={SIGN_IN} component={SignIn} />
              <Route exact path={SIGN_OUT} component={SignOut} />
              <Route exact path={FORGOT_PASSWORD} component={ForgotPassword} />
              <Route exact path={ACCOUNT} component={Account} />
              <Footer />
            </div>
          </BrowserRouter>
        </div>
      </div>
    );
  }
}
function mapStateToProps({ cUser }) {
  return { cUser };
}

export default connect(mapStateToProps, actions)(App);

用于更新当前用户状态的操作。

export const updateUserAuth = user => async (dispatch) => {
  try {
    const payload = {
      displayName: user.displayName,
      email: user.email,
      emailVerified: user.emailVerified,
      refreshToken: user.refreshToken,
      userId: user.uid,
    };
    return dispatch({ type: CURRENT_USER, payload });
  } catch (error) {
    console.log('error: ', error);
    return error;
  }
};

cUser（当前用户）在“帐户”页面上始终为null。

import React, { Component } from 'react';
import { connect } from 'react-redux';

import * as actions from '../actions';

class Account extends Component {
  componentWillMount() {
    if (this.props.cUser) {// always null
      this.props.getUserData(this.props.cUser.idToken); 
    }
  }
  render() {
    return (
      <div className="">
        <div className="row valign-wrapper section">
          <h1 className=" bigHeader">Account</h1>
          <div className="col s2 right-align" />
        </div>
      </div>
    );
  }
}
function mapStateToProps({ cUser }) {
  return { cUser };
}

export default connect(mapStateToProps, actions)(Account);

firebase的实现

import firebase from 'firebase/app';
import 'firebase/auth';

const prodConfig = {
  apiKey: 'xxxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
};

const devConfig = {
  apiKey: 'xxxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
};

const config = process.env.NODE_ENV === 'production'
  ? prodConfig
  : devConfig;

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export const auth = firebase.auth();

Answer 1

您应该使用withRouter，以便可以在页面之间传递redux状态：

import { BrowserRouter, Route, withRouter } from 'react-router-dom';
// -----------------------------^^->added
export default withRouter(
  connect(mapStateToProps, actions)(App)
);

Answer 2

通过将userId存储在localStorage中来解决此问题。

firebase.auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        localStorage.setItem('userId', authUser.uid);
        updateUserAuth(authUser);
      } else {
        localStorage.removeItem('userId');
        signOutUser();
      }
    });

React Redux Firebase-onAuthStateChanged延迟阻止使用生命周期方法

2 个答案: