使用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每个场景分量重定向。