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

Posted 2023-02-22

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

【英文标题】：Redirect to screen from an api interceptor (outside of component) in React Native

【发布时间】：2019-06-11 10:24:54

【问题描述】：

我正在开发一个使用 JWT 令牌对请求进行身份验证的 React Native 应用程序。为此，我创建了 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);
  
);

【参考方案1】：

对于这个功能，我认为你需要使用 Redux

【参考方案2】：

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

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

【参考方案3】：

不，你不需要 Redux。如果你使用 React Navigation，你可以这样做。您可以从任何地方访问

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

【讨论】：

这是导航到不同屏幕的最简单方法。如果您想从中间件导航，例如，如果发生未授权，则导航到登录屏幕非常有用。

【参考方案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 中，我们可以在 props 中使用该函数来更改页面，如下所示：

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

【参考方案5】：

关注官方文档：Navigating without the navigation prop

试试这样的

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