Question

我想实现受保护的路由，并且使用Firebase进行身份验证。我的浏览器冻结了以下代码：

const App: React.FC = () => {
  const [authentication, setAuthState] = useState({
    authenticated: false,
    initializing: true
  });

  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      setAuthState({
        authenticated: true,
        initializing: false
      });
    } else {
      setAuthState({
        authenticated: false,
        initializing: false
      });
    }
  });

  if (authentication.initializing) {
    return <div>Loading</div>;
  }
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/login" component={Login} />
          <PrivateRoute
            path="/"
            component={Home}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/join"
            component={Join}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/create"
            component={Create}
            authenticated={authentication.authenticated}
          />
        </Switch>
      </div>
    </Router>
  );
};

我是React新手，这是我第一次使用React钩子，但是这里出了什么问题？

Answer 1

我认为，就像iHowell在评论中解释的那样，firebase auth ...是一个副作用，因此您必须使用useEffect钩子。

const App: React.FC = () => {
  const [authentication, setAuthState] = useState({
    authenticated: false,
    initializing: true
  });

  React.useEffect(()=>firebase.auth().onAuthStateChanged(user => {
    if (user) {
      setAuthState({
        authenticated: true,
        initializing: false
      });
    } else {
      setAuthState({
        authenticated: false,
        initializing: false
      });
    }
  }), [setAuthState]);

  if (authentication.initializing) {
    return <div>Loading</div>;
  }
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/login" component={Login} />
          <PrivateRoute
            path="/"
            component={Home}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/join"
            component={Join}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/create"
            component={Create}
            authenticated={authentication.authenticated}
          />
        </Switch>
      </div>
    </Router>
  );
};

使用Firebase身份验证检查反应路由器保护的路由

1 个答案: