Как защитить или подтвердить подлинность маршрута React с использованием response-router-dom ampify - PullRequest
Новая
       88

Как защитить или подтвердить подлинность маршрута React с использованием response-router-dom ampify

0 голосов
/ 11 декабря 2019

Я создаю приложение, используя React и усиливаю. Аутентификация и авторизация работают правильно. Но это должно ограничить переход пользователя на некоторые конкретные маршруты React перед входом в приложение. Следующий фрагмент кода - это то, что я пробовал, и оно работает, если isAuthenticated() возвращает false. Но так как я использую Amplify im, используя метод 

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={async props =>
      await isAuthenticated() ? (
        <Navigation>
          <Component {...props} />
        </Navigation>
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

, вот мой код для функции isAuthenticated (). 

import Auth from "@aws-amplify/auth";
export const isAuthenticated = async () => {
  try {
    return await Auth.currentSession().isValid();
  } catch (error) {
    return false;
  }
};

, но это выдает ошибку, подобную этой.

Ошибка: объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Я знаю, это потому, что он возвращает обещание, но я его жду, но он не работает, так как я подумал, почему? .

1 Ответ

1 голос
/ 11 декабря 2019

измените свой частный маршрут на следующий: 

const PrivateRoute = ({ component: Component, ...rest }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  useEffect(async () => {
    const isAuth = await isAuthenticated()
    setIsLoggedIn(isAuth)
  }, [])
  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          <Navigation>
            <Component {...props} />
          </Navigation>
        ) : (
            <Redirect to="/login" />
          )
      }
    />
  )
}
...