使用 React Native Router 保护路由（场景）Flux/Redux

Question

我试图确保如果用户当前未登录，他们将始终被发送到登录页面。我正在使用 Redux 来存储当前用户 ID，所以这不是问题所在。主要问题是无论我在路由器文件中放入什么检查，应用程序都会在我导航到它们时显示所有页面。任何帮助将不胜感激。

 <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

我在路由器通量文档中使用 Switch：
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>

第二种选择是在基于 authState 的每个场景组件中使用 Actions.login() 重定向。

Answer 2

我建议你研究一下 redux 中间件，例如。 Sample implementation on github

使用 React Native Router 保护路由（场景）Flux/Redux

Protect routes (scenes) using React Native Router Flux/Redux

reactjs

react-native

react-redux

react-native-router-flux