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保护路由（场景）

2 个答案: