대응 라우터 인증 리디렉션

Question

현재 React 및 React Router V4 인 인증/로그인 흐름을 구현 중입니다. 그러나 나는 내 아이디어를 구현하기 위해 작동하는 리디렉션 "스키마"를 찾기 위해 고심하고있다.

는 사용자가 내 시스템 자신에 로그인하지 않은

1. 경우/그녀가 에 "/ 로그인"을 재 취득해야하며, 특정 로그인 페이지 구성 요소가 렌더링 다음과 같이

   상황이다. 내 응용 프로그램에 대한 등록 및 로그인 링크를 공유 할 수 있도록 시스템의 요구 사항이어야합니다.

2. 사용자가 인 경우 사용자는 원래 방문하고 싶은 경로로 리디렉션되어야합니다.

내 현재의 구현 :

항목 구성 요소

export default class Entry extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Router> 
      <Routes /> 
     </Router> 
    ); 
    } 
} 

경로의 구성 요소 (인증 검사가 일어난다 여기)

class Routes extends PureComponent { 

    componentDidMount() { 
    this.props.loadUser(); // async method (redux) loads the actual logged in user 
    } 
    render() { 
    return (
     <Switch> 
     <Route path="/login" render={() => (!this.props.user.username ? <LoginPage {...this.props}/> : <Redirect to="/app" />)} /> 
     <Route path="/app" render={() => (this.props.user.username ? <AppPage {...this.props} /> : <Redirect to="/login" />)} /> 
     <Route exact path="/" render={props => <Redirect to="/app" />} /> 
     </Switch> 
    ); 
    } 
} 
export default Routes; 

응용 프로그램 구성 요소 (중첩 된 라우팅

1. 사용자가 로그인하지만 내 응용 프로그램 사용자는 이제 /app/about
을 방문하고 싶어
2. 의 탭을 닫은 다음 무슨 일이 일어나고 다음과 같은 경우 여기)

   export default class App extends React.Component { 
       constructor(props) { 
       super(props); 
       } 
   
       render() { 
       const { match, user, logout } = this.props; 
       return (
        <Switch> 
        <Route path={`${match.path}/about`} component={About} /> 
        <Route path={`${match.path}`} component={Home} /> 
        </Switch> 
       ); 
       } 
   } 
   

   문제는 이제 발생

3. 경로 구성 요소가로드되지만 this.props.user.username은 null
4. 사용자는으로 리디렉션됩니다.
5. 이제 REDUX 저장소를 업데이트 this.props.user.username있다 this.props.loadUser() 비동기 방식은 더 이상하지 null하고 다음 사용자는 /app로 리디렉션됩니다하지만 그는 원래 /app/about를 방문하고 싶었다.

그래서 나에게 두통 만드는 줄은 사용자가 그/그녀가 처음 방문하고 싶은 URL로 리디렉션됩니다 있도록

<Route path="/login" render={() => (!this.props.user.username ? <LoginPage {...this.props}/> : <Redirect to="/app" />)} /> 

가 어떻게이 특정한 방식을 처리해야입니까?

어쩌면 나의 전반적인 접근 방식은 조금 이상합니다. 당신은 내가이 주제에 대한 자신의 큰 문서에가는 것이 좋습니다 반응 라우터의 V4를 사용하고 있기 때문에 사전에

덕분에, 나는 모든 도움 :

Answer 1

을 주셔서 감사합니다. Here

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

const AuthExample =() => (
    <Router> 
    <div> 
     <AuthButton/> 
     <ul> 
     <li><Link to="/public">Public Page</Link></li> 
     <li><Link to="/protected">Protected Page</Link></li> 
     </ul> 
     <Route path="/public" component={Public}/> 
     <Route path="/login" component={Login}/> 
     <PrivateRoute path="/protected" component={Protected}/> 
    </div> 
    </Router> 
);