Есть ли более быстрый способ проверить состояние пользователя в firebase, как onAuthStateChanged?

Question

В настоящее время я работаю над проектом next.js, использующим реагирование, редукс и firebase.Когда пользователь заходит на страницу, требующую авторизации, я использую следующий код, чтобы перенаправить их, если они не аутентифицированы.

import React from 'react';
import Router from 'next/router';

import { firebase } from '../../firebase';
import * as routes from '../../constants/routes';

const withAuthorization = (needsAuthorization) => (Component) => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authUser && needsAuthorization) {
          Router.push(routes.SIGN_IN)
        }
      });
    }

    render() {
      return (
        <Component { ...this.props } />
      );
    }
  }

  return WithAuthorization;
}

export default withAuthorization;

Я использую следующее репо в качестве базового проекта.Проблема в том, что приложение работает нормально, но когда я пытаюсь перейти на страницу, требующую аутентификации, когда я не аутентифицирован.Я не перенаправлен сразу, скорее, сначала показывает страницу, а затем перенаправляет.Поскольку HOC использует

firebase.auth.onAuthStateChanged()

, что является асинхронным.Есть ли более быстрый способ проверки, вошел ли пользователь в систему?

Я до сих пор рассматривал

firebase.auth().currentUser

, но мое внутреннее состояние зависит от обновления функции onAuthStateChanged, когда пользовательвыходит из системы на другой странице.

Answer 1

Использование прослушивателя для onAuthStateChanged обычно является правильным способом восстановления состояния аутентификации при полном переходе страницы.Поскольку при таком переходе происходит перезагрузка, существует вероятность того, что состояние аутентификации изменилось.Использование прослушивателя onAuthStateChanged гарантирует, что Firebase вызывает ваш код после того, как он проверил состояние аутентификации пользователя.Поскольку для этого может потребоваться вызов на сервер, это действительно может занять некоторое время, поэтому вы захотите показать анимацию «loading ...».

Если переход состояния не требует перезагрузки,например, когда вы просто визуализируете новый маршрут на той же странице, вы можете быть достаточно уверены, что состояние аутентификации не изменяется при переходе.В этом случае вы можете передать текущего пользователя из предыдущего компонента в новый.У Тайлера есть хорошая статья на эту тему: Передать реквизит компоненту, обработанному React Router .

В последнем случае firebase.auth().currentUser также должен сохранять свое состояние, и вы можете безопасно его использовать.Затем вы все равно будете использовать onAuthStateChanged для обнаружения изменений в состоянии аутентификации после загрузки нового маршрута.