Schützen Sie Routen (Szenen) mit React Native Router Flux/Redux

Question

Ich versuche sicherzustellen, dass Benutzer immer an die Anmeldeseite gesendet werden, wenn sie derzeit nicht angemeldet sind. Ich verwende Redux, um die aktuelle Benutzer-ID zu speichern Das ist nicht das Problem. Das Hauptproblem ist, dass, egal, welche Prüfungen ich in die Router-Datei einfüge, die App alle Seiten anzeigt, wenn ich zu ihnen navigiere. Jede Hilfe würde sehr geschätzt werden.

<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> 

Answer 1

Ich bin mit Schaltern wie im Router-Fluss docs:
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> 

Zweite Alternative war Actions.login() zu verwenden, in jeder Szene Komponente basierend auf authState umleiten.

Answer 2

Ich würde vorschlagen, dass Sie in redux Middleware, z. Sample implementation on github