Аутентификация Firebase возвращает false при перезагрузке страницы

Question

В настоящее время я работаю над проектом с Firebase Integration и React. Я могу зарегистрироваться и войти в систему, но я хочу, чтобы у некоторого Guard был доступ к «подключенным» страницам, когда я подключен, или для перенаправления на страницу по умолчанию для отключенного состояния, если я не подключен.

Я кодировал следующее для наличия различных маршрутов и установил его в файле App.tsx:

const ConnectedRoute: React.FC<RouteProps>  = ({ component, ...rest }) => {
  var route = <Route />
  var connected = isConnected()
  console.log(connected)

  if (connected){
    route = <Route {...rest} component={component}/>
  }
  else{
    route = <Route {...rest} render={() => <Redirect to ="/welcome" />} />
  }

  return route
}

const UnconnectedRoute: React.FC<RouteProps>  = ({ component, ...rest }) => {
  var route = <Route />
  var connected = isConnected()
  console.log(connected)

  if (connected){
    route = <Route {...rest} render={() => <Redirect to ="/home" />} />
  }
  else{
    route = <Route {...rest} component={component}/>
  }

  return route
}

const App: React.FC = () => {
  return (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/" render={() => <Redirect to="/welcome" />} />
        <UnconnectedRoute path="/welcome" component={UnconnectedHome} exact />
        <ConnectedRoute path="/home" component={ConnectedHome} exact />
        <UnconnectedRoute path="/login" component={Login} exact />
        <UnconnectedRoute path="/register" component={Register} exact />
        <ConnectedRoute path="/events/create" component={CreateEvent} exact />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
  )
};

И для инициализации firebase я сделал следующее:

export async function initializeApp(){
    console.log("Checking if app is initialized...")
    if (firebase.apps.length == 0){
        console.log("App initializing...")
        firebase.initializeApp(firebaseConfig);
        await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
    }
}

И функция, позволяющая узнать, подключен ли пользователь (например, повар ie):

export function isConnected(){
    const res = firebase.auth().currentUser
    console.log(res)
    return res !== null
}

Тем не менее, когда я перезагружаю вкладку, она всегда возвращает мне FALSE !

Итак, мне было интересно, как я мог запустить сервер Firebase перед запуском приложения? Это текущая проблема? В настоящее время я понятия не имею об этом, и это меня очень расстраивает ...

Если вы уже сталкивались с такой проблемой, это действительно помогло бы мне!

Спасибо!

Answer 1

Я пытался ответить в комментарии с кодом, он не работал.

Я сделал это сейчас (это не так хорошо, но, по крайней мере, это работает):

const connectedPaths = 
    [
        "/home",
        "/events/create"           
    ]

const unconnectedPaths = 
    [
        "/welcome",
        "/login", 
        "register"
    ]

firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        if (!connectedPaths.includes(window.location.pathname)) window.location.href = "/home"
    } 
    else {
        if (!unconnectedPaths.includes(window.location.pathname)) window.location.href = "/welcome"
    }
});

Answer 2

Firebase Authentication сохраняет состояние аутентификации пользователя в локальном хранилище. Но когда вы загружаете новую страницу (или перезагружаете существующую), она должна проверить у сервера, является ли состояние аутентификации все еще действительным. И эта проверка занимает некоторое время, в течение которого еще нет текущего пользователя.

Типичный способ обойти такие условия гонки состоит в том, чтобы использовать прослушиватель состояния авторизации для обнаружения текущего пользователя:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in, redirect to "connected" pages
  } else {
    // No user is signed in, probably require them to sign in
  }
});