使用react-router处理firebase auth

Question

我正在使用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) => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        return require.ensure([], require => {
          cb(null, require('./modules/Profile/Profile').default);
        });
      } else {
        return require.ensure([], require => {
          cb(null, require('./modules/Login/Login').default);
        });
      }
    });
  }}
/>
</Route>
);

有没有人有更好的方法这样做？

Answer 1

我制作了一个PrivateRoute组件，并向它传递了一个authenticatedprop，该 prop 是我从我使用的组件中的 redux 存储中获得的PrivateRoute

当我使用 firebase 登录时，我将用户数据放入 redux 存储中。所以就我而言，我会将状态映射到道具

const mapStateToProps = (state) => ({
    authenticated: !!state.user.uid,
})

并将经过身份验证的道具提供给我的PrivateRoute组件

const PrivateRoute = ({ component: Component, authenticated, path, exact }) => {
  return (
      <Route
          path={path}
          exact={exact}
          render={props =>
            authenticated
              ? <Component {...props} />
              : <Redirect to="/login"/>}
        />
    )
}