は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を渡すか、私はどこかから渡される必要がある場合は、多分それを必要とする各コンポーネントを接続して、読んでokですそこから？また、このアプローチは、/dashboard/settingsのようなネストされたルートでどのように動作しますか？おかげ

Answer 1

は実際に、それが反応するの民間ルートのこのタイプを使用しても大丈夫ですが、あなたは2つの瞬間チェックする必要があります：

1. を私はあなたがexact属性を持っていないことを、確認するため、すべての必要があります/dashboard/panel1、/dashboard/panel2ようなルートは

   auth.isAuthenticated} パス= "/ダッシュボード" 成分= {ダッシュボード} />

にプライベートであろう

2. 接続に問題があります。単純な修正があります：

   デフォルトのエクスポート（mapStateToProps、null、null、{ pure：false、 }）（PrivateRoute）;ここ

より多くの情報：親がPrivateRoute`がどのように動作するか `知る必要はありません React router private routes/redirect not working