在加载 firebase 用户之前 React Private Route 重定向答案

【问题标题】：React Private Route redirects before firebase user is loaded在加载 firebase 用户之前 React Private Route 重定向
【发布时间】：2020-11-09 17:22:26
【问题描述】：

我正在尝试为 2 个页面创建一个私有路由。但是，我的私有路由会在 firebase 更新之前检查用户是否已登录。

所以在调用私有路由的那一刻，用户将返回 null。这意味着即使我以用户身份登录，它也会立即将我重定向到登录页面。

我怎样才能让用户准备好私有路由来检测它？

function App() {
 const dispatch = useDispatch();
 const user = useSelector(selectUser);

 useEffect(() => {
   auth.onAuthStateChanged((authUser) => {
     if (authUser) {
       // the user is logged in
       console.log('user is ', authUser);
       dispatch(
         login({
           uid: authUser.uid,
           email: authUser.email,
         })
       );
     } else {
       //the user is logged out
       dispatch(logout());
     }
   });
 }, [dispatch]);
 return (
   <div className="App">
     <Switch>
       <PrivateRoute exact path="/" user={user} component={Home} />
       <PrivateRoute
         exact
         path="/workout"
         user={user}
         component={WorkoutCreator}
       />
       <Route eact path="/signup" component={Signup} />
       <Route exact path="/login" component={Login} />
     </Switch>
   </div>
 );
}

function PrivateRoute({ component: Component, user, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) => {
        return user ? <Component {...props} /> : <Redirect to="/login" />;
      }}
    ></Route>
  );
}

function Login() {
  const { register, handleSubmit, errors } = useForm();
  const [loading, setLoading] = useState(false);
  const user = useSelector(selectUser);
  const history = useHistory();

  useEffect(() => {
    if (user) history.push('/');
  }, [user, history]);

  function onSubmit(data) {
    auth
      .signInWithEmailAndPassword(data.email, data.password)
      .catch((error) => alert(error.message));
    console.log(user);
  }

【问题讨论】：

标签： reactjs firebase react-redux react-router

【解决方案1】：

将名为“authenticating”的布尔变量初始化为true，当您完成检测用户是否登录或注销时，然后将变量“authenticating”设置为false。只有在那之后检查用户是否为空。

【讨论】：

我相信我们同时回答了:)。谢谢，这就是我为解决我的问题所做的。我希望它被正确实施。

【解决方案2】：

我解决了。我使用加载器等到组件加载完毕。

function App() {
  const dispatch = useDispatch();
  const user = useSelector(selectUser);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        // the user is logged in
        console.log('user is ', authUser);
        dispatch(
          login({
            uid: authUser.uid,
            email: authUser.email,
          })
        );
      } else {
        //the user is logged out
        dispatch(logout());
      }
      setLoading(false);
    });
  }, [dispatch]);
  return (
    <div className="App">
      {!loading && (
        <Switch>
          <PrivateRoute exact path="/" user={user} component={Home} />
          <PrivateRoute

【讨论】：