Как создать защищенный маршрут с обещаниями

Question

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

Так как же мне дождаться возврата с крючка, пока не будет выполнена проверка аутентификации? Вот мой код:

export function ProtectedRoute(props){

const [loggedIn, setLoggedIn] = useState(false);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
    async function fetchUser() {
        let user = null;

        try {
            user = await Auth.currentAuthenticatedUser()
            if (user) {
                setLoggedIn(true);
            } else
            {
                setLoggedIn(false);
            }
        } catch (e) {
            setLoggedIn(false);
        }
    }
    fetchUser()
});

console.log("ProtectedRoute: returning " + loggedIn);
if (loggedIn)
    return props.component
else
    return <Redirect to={{pathname: '/login'}}/>

}

Answer 1

Найдено решение ... для isAuthenticated необходимо было по умолчанию установить значение true, а затем перенаправить, если это не так (похоже, что Redirect нарушает лог c для меня в моем исходном коде)

export function ProtectedRoute({ component: Component, ...rest }){

const [isAuthenticated, setLoggedIn] = useState(true);
useEffect(() => {
    (async () => {
        let user = null;

        try {
            user = await Auth.currentAuthenticatedUser()
            if (user) {
                setLoggedIn(true);
            } else
            {
                setLoggedIn(false);
            }
        } catch (e) {
            setLoggedIn(false);
        }
    })();
});

return (
    <Route
        {...rest}
        render={props =>
            isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
        }
    />
);

}

Answer 2

Я бы добавил новое состояние, loading, и до ist true, просто визуализируя компонент загрузки:

    export default ProtectedRoute(props) {
    
      const [loggedIn, setLoggedIn] = useState(false);
      const [loading, setLoading] = useState(true);
      
      useEffect(() => {
        (async () => {
          try {
            setLoading(true);
            const user = await Auth.currentAuthenticatedUser();
            setLoggedIn(!!user);
          } catch (error) {
            console.log(error);
            setLoggedIn(false);
          } finally {
            setLoading(false);
          }
        })();
      }, []);
    
      if(loading) return <h1>Loading...</h1>;
        
      if (loggedIn) return props.component
    
      return <Redirect to={{ pathname: '/login' }}/>
  }