인증 용 비동기 반응 라우터-V4

Question

I는 (워드 프로세서)이 PrivateRoute 성분있다 : I가 aysnc 요청 isAuthenticated()isAuthenticated로 변경하고자

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    isAuthenticated ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/login', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

한다. 그러나 응답이 반환되기 전에 페이지가 리디렉션됩니다.

명확하게하기 위해 isAuthenticated 기능이 이미 설정되었습니다.

무엇을 표시할지 결정하기 전에 비동기 호출이 완료 될 때까지 기다리는 방법은 무엇입니까?

Answer 1

Redux 또는 다른 종류의 상태 관리 패턴을 사용하지 않는 경우 Redirect 구성 요소 및 구성 요소 상태를 사용하여 페이지 렌더링 여부를 결정할 수 있습니다. 요청이 완료된 후 비동기 호출을 수행하여 상태를로드 상태로 설정하거나 사용자가 부재하거나 Redirect 구성 요소를 상태 및 렌더링하지 않을 경우 구성 요소가 리디렉션 될 기준을 충족시키지 못합니다.

class PrivateRoute extends React.Component { 
    state = { 
    loading: true, 
    isAuthenticated: false, 
    } 
    componentDidMount() { 
    asyncCall().then((isAuthenticated) => { 
     this.setState({ 
     loading: false, 
     isAuthenticated, 
     }); 
    }); 
    } 
    render() { 
    const { component: Component, ...rest } = this.props; 
    if (this.state.loading) { 
     return <div>LOADING</div>; 
    } else { 
     return (
     <Route {...rest} render={props => (
      <div> 
      {!this.state.isAuthenticated && <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />} 
      <Component {...this.props} /> 
      </div> 
     )} 
     /> 
    ) 
    } 
    } 
}