使用React本地路由器Flux/Redux保护路由(场景)

问题描述:

我想确保用户总是会被发送到登录页面,如果他们当前没有登录。我正在使用Redux来存储当前用户ID,所以这不是问题。主要的问题是,无论我将哪些检查放在路由器文件中,该应用程序在我导航到它们时都会显示所有页面。任何帮助将不胜感激。使用React本地路由器Flux/Redux保护路由(场景)

<Router sceneStyle={{ paddingTop: 65 }}> 
    <Scene 
    key="splash" 
    component={Splash} 
    title="App" 
    timeout={500} 
    nextScene={'main'} 
    initial 
    /> 

    <Scene key="auth" > 
    <Scene key="login" component={LoginForm} title="Please Login" /> 
    </Scene> 

    <Scene key="profile"> 
    <Scene key="profilePage" component={ProfilePage} title="My Profile" /> 
    </Scene> 

    <Scene key="main" > 
    <Scene 
     key="subscribedList" 
     component={SubscribedList} 
     title="Choose A List" 
    /> 
    <Scene 
     key="itemsList" 
     component={ItemsList} 
     onBack={() => Actions.subscribedList()} 
    /> 
    <Scene 
     key="createList" 
     component={CreateList} 
     title="Create A List" 
    /> 
    <Scene 
     key="createItem" 
     component={CreateItem} 
     title="Create Item" 
    /> 
    <Scene 
     key="compareItem" 
     component={CompareItem} 
     title="Found Item" 
    /> 
    </Scene> 
</Router> 

我使用交换机作为路由器磁通文档:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

handlePressPurchases =() => { 
    Actions.account({section: 'purchases'}) 
    } 



    import { connect } from 'react-redux' 

    <Scene 
      key="account" 
      component={connect(state=>({isAuth: state.login.username != null }))(Switch)} 
      tabs={true} 
      unmountScenes 
      selector={props=> !props.isAuth ? "login_account" : props.section } 
     > 
      <Scene key="login_account" component={LoginScreen} title="Login"/> 
      <Scene key='purchases' component={Purchases} title='Purchases' navBar={AppNavBar} /> 
      <Scene key='balance' component={Balance} title='Balance' navBar={AppNavBar} /> 
    </Scene> 

第二替代是使用Actions.login()基于authState每个场景分量重定向。

我建议你看看redux中间件,例如。 Sample implementation on github