Firebase auth.currentUser имеет значение null при загрузке страницы, пользователь загружается при вызове authstatechange после нескольких миллисекунд загрузки страницы

Я использую React с Firebase для разработки небольшого веб-приложения. Чтобы позаботиться об аутентификации, я использую контекстный API, а внутри контекста добавляю данные пользователя, вошедшего в систему.

AuthProvider.tsx

const AuthProvider: React.FC = props => {
  const [state, setState] = useState<IAuthContext>(authInitialState);
  console.log("Inside AuthProvider");
  useEffect(() => {
    auth.onAuthStateChanged( user => {
      console.log("Auth State changed and user is ----->", user);
      if (user) {
        console.log("User value updated to the context")
        setState({
            ...authInitialState,
          isAuthenticated:!!user,
          permissions:[],
          user:user
        });
      }
      const stateChange = {
        ...authInitialState,
        isAuthenticated: !!user,
        user
      };
      // if (!user) {
        return setState(stateChange);
      // }
    });
  }, []);
  console.log("Rendering AuthProvider", state);
  return (
    <AuthContext.Provider value={state}>{props.children}</AuthContext.Provider>
  );
};
export default AuthProvider;

AuthConsumer.tsx

const withAuthContext = (
  Component: React.ComponentClass<any> | React.FunctionComponent<any>
) => {
  console.log("Rendering AuthConsumer for ");
  return (props: any) => (
    <AuthContext.Consumer>
      {context => <Component {...props} context={context} />}
    </AuthContext.Consumer>
  );
};

export default withAuthContext;

PrivateRoute.tsx

interface PrivateRouteProps extends RouteProps {
    // tslint:disable-next-line:no-any
    component: any;
    context: IAuthContext;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const { component: Component, context: IAuthContext, ...rest } = props;
    console.log("Private route for ", props);
    return (
        <Route
            {...rest}
            render={(routeProps) =>
                props.context.isAuthenticated ? (
                    <Component {...routeProps} />
                ) : (
                    <Redirect
                        to={{
                            pathname: '/login',
                            state: { from: routeProps.location }
                        }}
                    />
                )
            }
        />
    );
};

export default withAuthContext(PrivateRoute);

App.tsx

return (
        <BrowserRouter>
            <div>
                <Switch>
                    <PublicRoute path="/frame" component={Frame} exact isAuthorized={true}/>
                    <Route path="/login" component={NewLogin} exact isAuthorized={true}/>
                    <PrivateRoute path="/nav" component={NavigationBar} exact/>
                    <PrivateRoute path="/dashboard" component={AnalyticsDashBoard} exact/>
                    <PrivateRoute path="/subscription" component={OrderSuccess} exact/>
                    <PrivateRoute path="/onboarding" component={OnBoarding} exact/>
                </Switch>
            </div>
        </BrowserRouter>
    );

Пользователь уже вошел в систему, а постоянство сеанса установлено на локальное. Проблема заключается в том, что когда я пытаюсь использовать localhost / subscription, который является частным маршрутом, context.isAuthenticated имеет значение false, поскольку наблюдатель «onAuthStateChanged» еще не запущен, поэтому он собирается перейти на страницу входа, но через несколько миллисекунд запускается authStateChange и устанавливается контекст, но это бесполезно, так как приложение уже перешло к входу в систему, так как privateroute думал, что пользователь не вошел в систему. Я хотел бы получить знания о том, как преодолеть эту проблему.

Всего 1 ответ


Когда страница загружается, Firebase восстанавливает учетные данные пользователя из локального хранилища и проверяет у сервера, действительны ли они по-прежнему. Поскольку это вызов к серверу, это может занять некоторое время и происходит асинхронно. По этой причине нормально, что firebase.auth().currentUser равен null пока не onAuthStateChanged .

Проблема в том, что firebase.auth().currentUser имеет несколько причин: firebase.auth().currentUser может иметь значение null :

  1. firebase.auth().currentUser имеет значение null поскольку клиент только что загрузился, и он все еще проверяет учетные данные на сервере.
  2. firebase.auth().currentUser имеет значение null поскольку клиент проверил учетные данные на сервере, а клиент не вошел в систему.
  3. firebase.auth().currentUser имеет значение null так как пользователь никогда не firebase.auth().currentUser в систему, поэтому учетные данные для проверки отсутствуют.

Вы хотите перемещаться в случаях 2 и 3, но не в случае 1.

Типичное решение состоит в том, чтобы не обрабатывать навигацию до тех пор, пока в первый раз не onAuthStateChanged . В этот момент вы можете быть уверены, что учетные данные были проверены на сервере или что учетные данные не были проверены, в обоих случаях вам нужно перейти на страницу входа.


Дополнительным вариантом для ускорения этого является сохранение небольшого токена в локальном хранилище самостоятельно при первом входе пользователя в систему, а затем чтение его при загрузке приложения. Если токен присутствует, вы можете различить случаи 1 и 3 и использовать его для перехода на нужную страницу немного раньше.

Пример этого см. В этой статье о архитектуре мобильных веб-приложений .


Есть идеи?

10000