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

您可以在此帮助下实现您想要的。 每当用户注销/状态发生变化时，onAuthStateChanged 将被调用，他们将立即重定向到登录屏幕。

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>
  );
};

Answer 2

来自react-firebase-js.com docs：

import * as React from "react";
import { render } from "react-dom";
import {
    FirebaseAuthProvider,
    FirebaseAuthConsumer
} from "@react-firebase/auth";
import * as firebase from "firebase/app";
import { config } from "./test-credentials";    

const App = () => {
    return (
        <div>
            <FirebaseAuthConsumer>
                {({ isSignedIn, user, providerId }) =>

                    isSignedIn === true ?

                         <Switch>
                            <Route exact path="/" component={Your Component} />
                         </Switch>
                        : <Switch>
                            <Route exact path="/signIn" component={Login} />
                        </Switch>

                } </FirebaseAuthConsumer>
        </div>
    );
};

render(<App />, document.getElementById("root"));

Answer 3

您可以分两步完成。

第一步是使logged 成为useState 的状态。它现在只是一个局部变量，因此在您的第二个示例中，该值的更改不会传播到路由。所以，让它成为一个状态，在useEffect 中添加更新逻辑，就像你的第二个例子一样。

第二步是使用Firebase AuthStateListener监听用户的auth状态变化，它监听你的auth状态变化（包括currentUser的初始加载）并调用它的回调，然后根据结果更新状态.