Question

我正在开发一个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);
  }
);

Answer 1

为此功能，我认为您需要使用Redux

Answer 2

这是一篇简单的中型文章，描述了redux和redux saga的故事。 https://medium.com/@tkssharma/understanding-redux-react-in-easiest-way-part-1-81f3209fc0e5

使用redux-saga作为中间件，并在es6中使用生成器功能new功能

Answer 3

否，您不需要Redux。如果您使用的是React Navigation，则可以采用这种方式。您可以从任何地方访问

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

Answer 4

您可以使用这种方式：

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 ），该函数使我们能够基于子级更改子级中父级的状态。工作，状态更改后，component_1将被卸载，而component_2将被安装（例如登录页面）。在component_1中，我们可以在道具中使用该功能来更改页面，如下所示：

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

Answer 5

尝试这样的事情

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

从React Native中的api拦截器（组件外部）重定向到屏幕

5 个答案: