javascript - React js Firebase 身份验证无法正常工作

Question

我正在尝试保护我的所有路线，因为我正在尝试一种逻辑，但它没有按照我想要的方式工作。

我正在使用 app.js 文件，因为我有我的路由文件。我正在使用功能组件。

我在 app.js 中的代码是:

export default function App(props) {    
  useEffect(() => {
  }, []);
  var logged = null
  var user = firebase.auth().currentUser;
  if (user) {
    logged = true
    console.log("user exist", user);    
  } else {
    logged = false
    console.log("user don't exist", logged);
  }

  const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
      {...rest}
      render={props =>
        //fakeAuth.isAuthenticated === true ? (
          logged === true ? (
          <Component {...props} />
        ) : (        
          <Redirect to="/signIn" />
        )
      }
    />
  );

   <PrivateRoute path="/features" component={FeaturePage} />

 }

此代码工作正常，但当我刷新页面或尝试从浏览器访问 URL 时，它不起作用。

当我尝试添加逻辑时:

 var logged = null

  useEffect(() => {
    // CLEAN UP
    var user = firebase.auth().currentUser;
    if (user) {
      logged = true
      console.log("user exist", user);    
    } else {
      logged = false
      console.log("user don't exist", logged);
    }
    return () => {
      document.querySelector('.first-row').style.position = '';
    };
  }, []);

这不起作用，我的问题是如何创建我的 app.js 文件，检查用户是否每次从浏览器或任何方式打开路由时检查用户是否登录。它应该知道它是否已登录。

Firebase 请提供一些示例，否则我们将不胜感激。

Answer 1

您可以分两步完成。

第一步是使用 useState 使 logged 成为一个状态。它现在只是一个局部变量，因此在第二个示例中，该值的更改不会传播到路由。因此，使其成为一种状态，在 useEffect 中添加更新逻辑，如第二个示例中所示。

第二步是使用 Firebase AuthStateListener 监听用户的身份验证状态更改，它监听您的身份验证状态更改(包括 currentUser 的初始加载)并调用其回调，然后根据结果更新状态。