React Native - Общее место для проверки токена доступа

Question

У меня есть встроенное приложение, в котором я использую Stack Navigator. На экранах я делаю несколько вызовов API Rest для получения данных.

В API остальных есть аутентификация токена, которую я уже сохранил с помощью AsyncStorage. Токен доступа действителен только в течение 10 часов, если после 10 часов есть какое-либо действие пользователя, в которое необходимо войти и перенаправить пользователя на экран входа в систему.

Я делаю вызовы API из ComponentDidMount (), поэтому у меня есть представление о том, как перенаправить пользователя для входа в систему, если срок действия токена истек, например: -

   ComponentDidMount()
    {
        var accessToken = await GetAccessToken();
        debugger;
        if (accessToken === null) {
          this.props.navigation.navigate("Auth");
        }
    }

Но если бы провести такую ​​проверку на уровне всего приложения, как я могу это сделать, не повторяя этот кусок кода везде?

Answer 1

Я не уверен, как выглядит ваш app.js, но что вы можете сделать в реакции native с проверкой навигации реагирования на базовом примере, который я привел ниже, о том, как вы можете создать функцию и перейти на верхний уровень

App.js

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

const TopLevelNavigator = createStackNavigator(
  {
    Auth: LoginScreen,
    Home: HomeScreen,
    Details: DetailsScreen
  },
  {
    initialRouteName: "Home"
  });

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {


   async ComponentDidMount()
    {
        let accessToken = await GetAccessToken();
        debugger;
        if (accessToken === null) {
          NavigationService.navigate("Auth");
        }
    }


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

Вы можете проверить эту ссылку https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html