Перенаправление на экран с перехватчика API (вне компонента) в React Native - PullRequest
Новая
       11

Перенаправление на экран с перехватчика API (вне компонента) в React Native

0 голосов
/ 17 января 2019

Я работаю над приложением React Native, которое аутентифицирует запросы с помощью токенов JWT. Для этого я создал перехватчики запросов и ответов Axios, чтобы добавить токен к каждому запросу (перехватчик запросов) и перенаправить пользователя на экран входа в систему, когда у ответа 401 статус HTTP (перехватчик ответа).

Проблема в том, что я не нашел способа сделать перенаправление вне компонента. Код ниже находится в службе API, которая импортируется всякий раз, когда я хочу, чтобы был выполнен вызов API.

Что мне нужно сделать, чтобы перенаправить на экран входа в систему, поскольку эта служба не имеет состояния и ей все равно, из какого компонента она вызывается? 

// 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);
  }
);

Ответы [ 5 ]

0 голосов
/ 30 января 2019

попробуйте что-то вроде этого 

// 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 голосов
/ 17 января 2019

вы можете использовать этот способ: 

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 /> )
    }

здесь мы используем два компонента как дочерний элемент от одного родителя, в пункте A мы передаем дочернему функцию (называемую props ), которая даетМы можем изменить состояние родителя внутри дочернего элемента, основываясь на нашей работе, и при изменении состояния компонент_1 будет отключен, а компонент_2 будет подключен (например, страница входа в систему).в component_1 мы можем использовать эту функцию в реквизите для изменения страницы следующим образом: 

if (response.status === 401) {
  deviceStorage.removeData('token');
  // TODO:
  this.props.onChange(2) // here you can redirect to that component
}
0 голосов
/ 17 января 2019

Вот простая средняя статья, в которой описывается сундук с редуксом. https://medium.com/@tkssharma/understanding-redux-react-in-easiest-way-part-1-81f3209fc0e5

Используйте redux-saga в качестве промежуточного программного обеспечения и используйте функцию генератора new feauture в es6

0 голосов
/ 17 января 2019

Нет, для этого вам не нужен Redux. если вы используете React Navigation, вы можете сделать это следующим образом. Вы можете получить доступ отовсюду

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

0 голосов
/ 17 января 2019

Для этой функциональности я думаю, что вам нужно использовать Redux

...