React-router-dom защищенный маршрут с асинхронным - PullRequest
Новая
       18

React-router-dom защищенный маршрут с асинхронным

1 голос
/ 11 февраля 2020

Итак, у меня есть следующий маршрутизатор: 

 <Router>
   <TopBar />
     <Route path="/" exact component={Home} />
     <Route path="/cadastro" exact component={SignUp} />
     <Route path="/login" exact component={Login} />
     <ProtectedRoute path="/perfil/:profileId" auth={props.auth} exact component={Profile} />
   <Footer />
 </Router>

Маршрут /perfil/:profileId должен быть защищен только для аутентифицированных пользователей. Мой компонент ProtectedRoute выглядит следующим образом: 

function ProtectedRoute({
  component: Component,
  dispatch,
  auth,
  ...rest
}) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
            }}
          />
        )
      }
    />
  );
}

На основе результата isAuthenticated() он решает, будет ли пользователь обращаться к странице или нет. Моя проблема здесь в том, что функция isAuthenticated() отправляет серверу запрос на проверку токена аутентификации, поэтому он асинхронный. Я не могу просто поместить async / await в мою функцию isAuthenticated, потому что появляется эта ошибка: 

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

У кого-то есть идеи, как решить эту проблему? Все мои логи аутентификации c находятся на стороне сервера, для меня нет смысла хранить только логи проверки c на стороне клиента только для решения этой проблемы. Спасибо:)

1 Ответ

0 голосов
/ 11 февраля 2020

Я предлагаю создать такую ​​функцию: 

 const renderContent = () => {
        switch (props.auth) {
            case false:
                return (
                    <Switch>
                         <Route path="/" exact component={Home} />
                         <Route path="/cadastro" exact component={SignUp} />
                         <Route path="/login" exact component={Login} />
                         <Redirect to={{ pathname: "/login" }} />
                    </Switch>
                );
            default:
                return (
                    <Switch>
                       <Route path="/" exact component={Home} />
                       <Route path="/cadastro" exact component={SignUp} />
                       <Route path="/login" exact component={Login} />
                       <Route path="/perfil/:profileId" exact component={Profile} />
                       <Redirect to={{ pathname: "/" }} />
                    </Switch>
                );
        }
    };

И тогда в вашем методе рендеринга вы можете сделать это: 

 return <div>{renderContent()}</div>;
...