小编Bon*_*tis的帖子

我正在使用webpack构建React + Redux + Firebase应用程序,并试图找出处理受保护路由和重定向的最佳方法.我已经尝试使用onEnter()与setTimeout()像许多例子表明,但最终仍重定向之前闪烁备用部件.

这是我目前拥有的,我正在努力想出一个更优雅的解决方案.这主要是有效的,但它失败的一个例子是,如果我在浏览器中/profile并导航到/.似乎因为firebase.auth()需要再次初始化,我会HomePage在切换之前获得组件的闪存Profile.

Firebase已初始化,firebaseClientConfig我正在传递firebase.auth()给routes.

import { auth } from './firebaseClientConfig';  

...    

export default (
<Route path="/" component={App}>    
 <IndexRoute
  getComponent={(nextState, cb) => {
    auth.onAuthStateChanged((user) => {
      if (!user) {
        return require.ensure([], require => {
          cb(null, require('./components/HomePage').default);
        });
      } else {
        return require.ensure([], require => {
          cb(null, require('./modules/Profile/Profile').default);
        });
      }
    });
  }}
/>
<Route
  path="/profile"
  getComponent={(nextState, cb) => { …

我正在使用Jest来测试我的firebase功能.这一切都在浏览器中,因此我与服务器端的firebase没有任何冲突.当我使用firebase.auth()或firebase.database()一切正常.当我尝试使用firebase.storage()我的测试失败.

这是我的firebase导入和初始化:

import firebase from 'firebase';
import config from '../config';

export const firebaseApp = firebase.initializeApp(config.FIREBASE_CONFIG);
export const firebaseAuth = firebaseApp.auth();
export const firebaseDb = firebaseApp.database();

我有一个imageUtils文件,其中包含上传功能:

import { firebaseApp } from './firebase';

export const uploadImage = (firebaseStoragePath, imageURL) => {
  return new Promise((resolve, reject) => {
    // reject if there is no imagePath provided
    if (!firebaseStoragePath) reject('No image path was provided. Cannot upload the file.');

    // reject if there is no imageURL provided
    if …