Utilisation de Redux pour créer des routes protégées avec React-Navigation (v.3 ou v.4)

Vous avez donc une variable d'état redux isAuthenticated .

Dans chaque écran, vous devrez vérifier cet état, s'il n'est pas connecté, puis que l'utilisateur doit ouvrir l'écran de connexion et réinitialiser la pile de navigation.

vous pouvez vérifier n'importe quelle méthode de cycle de vie qui sera appelée lors de la première exécution,

par exemple, constructeur , componentWillMount , componentDidMount , etc ...

pour la vérification de l'état de redux,

const appReducer = combineReducers({
  loginReducers: LoginReducers,
  ...
  ...
});

export default (rootReducer = (state, action) => {
  if (action.type == LOGOUT_SUCCESS) {
    state = undefined;
  }
  return appReducer(state, action);
});

et pour effacer toute la pile, vous vous devez créer une action que nous avons appelée dans la section ci-dessus.

export const logoutAction = () => {
  return dispatch => dispatch({ type: LOGOUT_SUCCESS });
};

et vous devez changer une certaine logique dans le fichier où vous avez écrit le code du réducteur de combinaison,

if(!this.props.isAuthenticated){
 this.props.logoutAction();
 this.props.navigation.navigate("Login");//Login or whatever your first screen is...
}

cela réinitialisera tout le réducteur.

Maintenant, si vous voulez créer un bouton de déconnexion, onPress du bouton changez simplement isAuthenticated à false et lancez la méthode de navigation et l'action de déconnexion, c'est tout.

vous pouvez utiliser le flux de routeur natif de réaction pour la navigation

https: //www.npmjs.com/package/react-native-router-flux

sample:

<Text
    style={alerts.btn}
    onPress={
        () => Actions.question(
            // send data 
            {
                'code': data_1,
            })}>
    Go to Home
</Text>

react-navigation a createSwitchNavigator exactement pour des cas comme celui-ci Authentification Flux .

Vous devez regrouper vos itinéraires protégés dans un seul MainStack. Utilisez createStackNavigator:

class InitialLoadingScreen extends React.Component {
    constructor(props) {
        super(props);
        this.bootstrapAsync();
    }

    bootstrapAsync = async () => {
        // Load the home screen for the logged in users 
        if (this.props.isAuthenticated) {
            return this.props.navigation.navigate('home');
        }

        // load the Auth screen if the user is NOT logged in
        this.props.navigation.navigate('login');
    }

    // Render any loading content that you like here
    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator />
            </View>
        );
    }
}

const mapStateToProps = ({ settings }) => ({
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
});

export default connect(mapStateToProps)(InitialLoadingScreen);

Ensuite, configurez votre pile d'authentification, à nouveau en utilisant createStackNavigator:

const Routes = createSwitchNavigator({
    initialLoading: InitialLoadingScreen,
    auth: AuthStack,
    all: MainStack,
}, {
    initialRouteName: 'initialLoading',
});

export default createAppContainer(Routes);

Et maintenant vient le createSwitchNavigator - pour charger la pile MainStack ou la AuthStack :

XXX

Le createSwitchNavigator chargera InitialLoadingScreen qui contient la logique si l'utilisateur est authentifié ou non:

const AuthStack = createStackNavigator({
    login: { screen: LoginScreen },
    register: { screen: RegisterScreen },
    forgot: { screen: ForgottenPasswordScreen },
    ...
});