使用react-navigation和redux登錄後重定向用戶

我在React Native中有一個登錄組件。使用react-navigation和redux登錄後重定向用戶

我使用使用react-navigation和redux在我的authReducer中存儲isLoggedIn。

我希望用戶從登錄組件，如果他（她）在登錄/被送走。因此，它應該永遠不可能看到登錄頁面，如果您已經登錄。

我想我有在https://github.com/react-community/react-navigation/blob/master/examples/ReduxExample/src/reducers/index.js處設置navReducer。我只是不知道什麼是

// Start with two routes: The Main screen, with the Login screen on top. 
const firstAction = AppNavigator.router.getActionForPathAndParams('Main'); 
const tempNavState = AppNavigator.router.getStateForAction(firstAction); 
const secondAction = AppNavigator.router.getActionForPathAndParams('Login'); 
const initialNavState = AppNavigator.router.getStateForAction(
    secondAction, 
    tempNavState 
);

意味着通常將如何保護部分航線，並強制用戶登錄以後，他/她成功登錄，他/她應該被送到另一條路線？

來源

2017-05-29 Jamgreen

我和我目前的一個項目有同樣的問題。這是我如何找到一個好的解決方案。我相信我的一些代碼可以更好地重構......但它應該有助於給你一個想法。基本上，我使用基於令牌的身份驗證，並檢查應用程序在本地存儲器中是否存在令牌時呈現的內容，如果是，則該用戶被「驗證」。這個用戶對服務器發出的任何請求都會附加該令牌，後端可以驗證該令牌是否有效，如果不是，那麼我可以返回一個動作來刪除該令牌，然後將令牌記錄下來。

我有一個索引頁是這樣的：

import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import reducers from './reducers'; 
import ReduxThunk from 'redux-thunk'; 
import Content from './app'; 

class App extends Component { 
    render() { 
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 

    return(
     <Provider store={store}> 
     <Content /> 
     </Provider> 
    ); 
    } 
} 

export default App;

這讓我Redux的使用與我處存放...然後我得到我的實際應用內容從我的app.js文件看起來像這樣：

import React, { Component } from 'react'; 
import { View, StatusBar, Platform, AsyncStorage, ActivityIndicator } from 'react-native'; 
import { Tabs, Drawer, LoginStack } from './config/router'; 
import { connect } from 'react-redux'; 
import { checkLogin } from './actions'; 

class Content extends Component { 
    componentWillMount() { 
    this.props.checkLogin(); 
    } 

    render() { 
    if (this.props.checkingUser) { 
     return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> 
      <ActivityIndicator size="large" /> 
     </View> 
    ); 
    } 
    if (this.props.token) { 
     if (Platform.OS === 'ios') { 
     return <View><StatusBar barStyle="light-content" /><Tabs /></View>; 
     } 

     return <Drawer />; 
    } 

    return <View><StatusBar barStyle="light-content" /><LoginStack /></View>; 
    } 
} 

const mapStateToProps = ({ auth }) => { 
    const { token, checkingUser } = auth; 

    return { token, checkingUser }; 
} 

export default connect(mapStateToProps, { checkLogin })(Content);

然後，我有我的checkLogin行動，看起來像這樣：

export const checkLogin =() => { 
    return (dispatch) => { 
    doCheck(dispatch); 
    } 
} 

const doCheck = async dispatch => { 
    let token = await AsyncStorage.getItem('token'); 

    if (token) { 
    dispatch({ type: LOGGED_IN, payload: token }); 
    } else { 
    dispatch({ type: LOGGED_OUT }); 
    } 
}

來源

2017-05-30 03:00:29

使用react-navigation和redux登錄後重定向用戶

回答

相關問題