6
votes

Redirection vers l'écran à partir d'un intercepteur d'API (en dehors du composant) dans React Native

Je travaille sur une application React Native qui authentifie les requêtes avec des jetons JWT. À cette fin, j'ai créé des intercepteurs de demande et de réponse axios pour ajouter le jeton à chaque demande (intercepteur de demande) et rediriger l'utilisateur vers l'écran de connexion chaque fois qu'une réponse a un statut HTTP 401 (intercepteur de réponse).

Le problème est que je n'ai pas trouvé de moyen de faire la redirection en dehors d'un composant. Le code ci-dessous est dans un service API qui est importé chaque fois que je souhaite qu'un appel API soit effectué.

Que dois-je faire pour rediriger vers mon écran de connexion car ce service est sans état et ne se soucie pas de quel composant il est appelé?

// Response interceptor
axiosInstance.interceptors.response.use(
  response => {
    // Do something with response data
    if (response.status === 401) {
      deviceStorage.removeData('token');
      // TODO:
      // Redirect to login page
    }
    return response;
  },
  error => {
    // Do something with response error
    return Promise.reject(error);
  }
);

reactjs react-native react-native-android native

0 commentaires

5 Réponses :

2
votes

Pour cette fonctionnalité, je pense que vous devez utiliser Redux

0 commentaires

2
votes

Voici un article moyen simple qui décrit redux avec la saga redux. https://medium.com/@ tkssharma / comprendre-redux-react-in-easy-way-part-1-81f3209fc0e5

Utilisez redux-saga comme middleware et utilisez la nouvelle fonction de générateur dans es6

0 commentaires

3
votes

Non, vous n'avez pas besoin de Redux pour cela. si vous utilisez React Navigation, vous pouvez faire comme ceci. vous pouvez accéder de partout

https://reactnavigation.org/docs/en/navigating -without-navigation-prop.html

1 commentaires

C'est le moyen le plus simple de naviguer vers un autre écran. Extrêmement utile si vous souhaitez naviguer entre les middlewares, par exemple, vers l'écran de connexion en cas de non-autorisation.

1
votes

vous pouvez utiliser cette façon:

if (response.status === 401) {
  deviceStorage.removeData('token');
  // TODO:
  this.props.onChange(2) // here you can redirect to that component
}

ici nous utilisons deux composants comme enfant d'un parent, au point A nous passons une fonction à child (appelée accessoires ) qui nous donnent la possibilité de changer l'état du parent à l'intérieur de child, en fonction de notre travail, et lorsque l'état est changé, component_1 sera démonté et component_2 sera monté (page de connexion par exemple). dans le composant_1, nous pouvons utiliser cette fonction dans les accessoires pour changer de page comme ceci:

import Component_1 from 'PATH TO IT'
import Component_2 from 'PATH TO IT'

this.state = {   
        status: 1
    }


render(){
    if(this.state.status == 1){
          return( <Component_1 onChange={(value)=> this.setState({status: value}) }/> )//Point => A
    }else if(this.state.status == 2){ 
             return( <Component_2 /> )
    }

0 commentaires

2
votes

Suivez le document officiel: Naviguer sans l'accessoire de navigation

essayez quelque chose comme ça

// App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';

const TopLevelNavigator = createStackNavigator({ /* ... */ })

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

// NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

0 commentaires