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

您可以分两个步骤进行操作。

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

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

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

您可以借助此功能实现您想要的。每当用户注销/状态更改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>
  );
};

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

3 个答案: