Question

我有一个React Native应用程序，其中正在使用Stack导航器。在屏幕上，我做了一些Rest API调用来获取数据。

Rest API具有令牌身份验证，我已经使用AsyncStorage保存了该令牌身份验证，如果在需要登录并重定向到登录屏幕的用户10小时后有任何用户操作，则访问令牌仅在10个小时内有效。

我从ComponentDidMount（）进行API调用，所以我对如何在令牌已过期的情况下将用户重定向到登录名有一个想法：-

obj.title = X;

但是，如果要在整个应用程序级别执行这种检查，该如何做而又不用到处重复这段代码呢？

Answer 1

我不确定您的app.js是什么样子，但是您可以通过react navigation checkout在react 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

React Native-进行访问令牌验证的常用场所

1 个答案: