React js Firebase аутентификация не работает должным образом

Question

Я пытаюсь обезопасить все свои маршруты в реакции на то, что я пробую одну логи c, но она не работает так, как я хочу.

Я использую приложение. js файл в том, что у меня есть мой файл маршрутов. Я использую функциональный компонент.

Мой код в приложении. 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} />

 }

Этот код работает нормально, но когда я обновляю страницу или пытаюсь go на URL из браузера это не работает.

Когда я пытаюсь добавить логи c в:

 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 = '';
    };
  }, []);

Это не работает, мой вопрос, как создать мой файл приложения. js проверяет, вошел ли пользователь в систему или нет каждый раз, когда пользователь открывает маршрут из браузера или любым другим способом. Он должен знать, вошел ли он в систему или нет.

Firebase, приведите несколько примеров, или любой ответ будет оценен.

Answer 1

Вы можете сделать это в два этапа.

Первый шаг - сделать logged состоянием с useState. Сейчас это просто локальная переменная, поэтому во втором примере изменение этого значения не распространяется на маршрут. Итак, сделайте это состояние, добавьте обновление logi c в useEffect, как во втором примере.

Второй шаг - прослушивание изменения состояния авторизации пользователя с использованием Firebase AuthStateListener , который прослушивает изменение вашего состояния авторизации (которое включает в себя начальную загрузку currentUser) и вызывает его обратный вызов, а затем обновляет состояние на основе результата.

Answer 2

Вы можете достичь того, что вы хотите с помощью этого. Каждый раз, когда пользователь выходит из системы / изменяет состояние, 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 3

С реагирует на пожарную базу- js .com документы :

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