Reactjs Firebase Аутентификация пользователя Защищенные маршруты

Question

Я использую сервис Firebase user authentication с reactjs. У меня проблема с запуском функции auth.onAuthStateChanged после рендеринга компонента. Я использую protected маршруты и пропускаю к ​​нему. Это создает проблему при перенаправлении пользователя на определенную страницу.

Например: domain.com/signin страница должна перенаправить пользователя на domain.com/customers после аутентификации пользователя. В настоящее время только берет на domain.com и при выходе пользователя он должен перенаправить на domain.com/signin.

код: https://codesandbox.io/s/serverless-leaf-pgtf1?fontsize=14

Я попробовал этот код

auth.onAuthStateChanged(user => {
    if (user && user.emailVerified) {
       this.setState({
         authenticated: true
      });
    } else {
       this.setState({
         authenticated: false
       });
    }
});

Answer 1

Ваш UnauthorizedRoute компонент высокого порядка настроен так, что, когда пользователи не проходят аутентификацию, он перенаправляет их прямо на домашнюю страницу, т.е. domain.com/.

const UnauthorizedRoute = ({
  component: Component,
  authenticated,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === false ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to="/" />
        )
      }
    />
  );
};

Чтобы перенаправить пользователей на определенную страницу после проверки подлинности, вы можете добавить дополнительный компонент к компоненту UnauthorizedRoute, например, afterAuthPath, если это свойствоПри наличии, компонент UnauthorizedRoute будет перенаправлять пользователей на путь afterAuthPath, если они аутентифицированы, в противном случае он будет использовать поведение по умолчанию для перенаправления на домашнюю страницу. Реализация может быть такой:

const UnauthorizedRoute = ({
  component: Component,
  authenticated,
  afterAuthPath,
  ...rest
}) => {
  const redirectPath = afterAuthPath || "/";
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === false ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to={redirectPath} />
        )
      }
    />
  );
};

Затем вы можете сделать это для входа и любого другого маршрута, который требует такого поведения:

<UnauthorizedRoute
  authenticated={props.authenticated}
  path="/signin"
  afterAuthPath="/customers"
  component={SignInCustomer}
/>