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

2024-03-01

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

遵循官方文档:无需导航道具即可导航 https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

尝试这样的事情

// 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,
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 React Native 中的 api 拦截器(组件外部)重定向到屏幕 的相关文章

随机推荐