는 REDUX 보호 경로와 인증

Question

내가 REDUX와 라우터 V4 반응 사용하고

와 라우터 V4 반응하고 난 사용자가 로그인하지 않은 경우 리디렉션 개인 보호 경로의 사용을 만들고 싶어.

내가이 경로 구성 요소가 :

class Routes extends Component { 

render() { 
    const { auth } = this.props; 
    // so checks against isAuthenticated can pass 
    if (auth.isAuthenticated !== undefined) { 
     return (
      <div> 
       <Route exact component={() => <Home />} /> 
       <PublicRoute 
        authed={() => auth.isAuthenticated} 
        path="/login" 
        component={(routerProps) => <Login {...routerProps} />} 
       /> 
       <PublicRoute 
        authed={() => auth.isAuthenticated} 
        path="/register" 
        component={(routerProps) => <Register {...routerProps} />} 
       /> 
       <PrivateRoute 
        authed={() => auth.isAuthenticated} 
        path="/dashboard" 
        component={Dashboard} 
       /> 
      </div> 
     ); 
    } else { 
     return <div></div> 
    } 
    } 
} 

function mapStateToProps(state) { 
    return { 
    auth: state.auth 
    } 
} 

export default withRouter(connect(mapStateToProps)(Routes)); 

는 다음과 같이 구현됩니다

class Main extends Component { 

constructor(props) { 
    super(props); 
} 

componentDidMount() { 
    store.dispatch(checkAuth()); 
} 

render() { 
    return (
     <Provider store={store}> 
      <Router> 
       <Theme> 
        <Routes /> 
       </Theme> 
      </Router> 
     </Provider> 
    ); 
    } 
} 

이것은 PrivateRoute입니다 :

export function PrivateRoute({ component: Component, authed, ...rest }) { 
const isAuthenticated = authed(); 
return (
    <Route 
     {...rest} 
     render={props => 
      isAuthenticated === true ? (
       <Component {...props} /> 
      ) : (
       <Redirect 
        to={{ 
         pathname: "/login", 
         state: { from: props.location } 
        }} 
       /> 
      ) 
     } 
    /> 
); 
} 

auth 소품을 전달하는 가장 좋은 방법은 무엇입니까? 경로 구성 요소를 연결하고 거기에서 auth을 전달하면 괜찮습니까? 그렇지 않으면 다른 곳에서 전달해야하며 필요로하는 각 구성 요소를 연결해야합니다. 거기에서? 또한이 방법은 중첩 된 경로 (예 : /dashboard/settings)와 어떤 관련이 있습니까? 덕분에 실제로

Answer 1

, 반응 민간 경로의이 유형을 사용하는 것이 괜찮습니다,하지만 당신은이 순간을 확인해야합니다 :

1. 내가 확인해야을 그렇게 모든 exact 속성을하지 않아도 당신의 /dashboard/panel1 같은 경로는 /dashboard/panel2는

   auth.isAuthenticated} 경로 = "/ 대시" 성분 = {} 대시 />

에 개인 것

2. 연결에 문제가 있습니다. 다음과 같은 간단한 수정이 있습니다.

   기본 내보내기 연결 (mapStateToProps, null, null, { pure : false, }) (PrivateRoute); 여기

자세한 내용 : 부모가 PrivateRoute`의 작동 방식을`알 필요가 없습니다 React router private routes/redirect not working