Как я могу ориентироваться один раз, когда я нашел JWT?

Question

Я просто застреваю в реактивном режиме и мне нужна помощь при переходе на защищенный экран при обнаружении токена.Где искать токен при загрузке приложения?И как я могу перемещаться по пользователю один раз, не вызывая навигацию несколько раз?У меня проблема в том, что я проверяю токен при монтировании компонента, который вложен в стек.Если я перемещаюсь в другую часть стека, функция вызывается снова, и я не могу перемещаться.Я могу получить токен вне стека, но у меня возникают проблемы с навигацией, так как мне нужно передать props.navigate в компоненте экрана.Каков рекомендуемый подход к поиску токена и созданию навигации?

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import RootContainer from './screens/RootContainer';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    );
  }
}

RootContainer.js

...

  render() {

    const MainNavigator = createBottomTabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: {
        screen: createBottomTabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: {
            screen: createStackNavigator({
              review: { screen: ReviewScreen },
              settings: { screen: SettingsScreen }
            })
          }
        })
      }
      // Route Configuration for Initial Tab Navigator
    }, {
      // do not instantly render all screens
      lazy: true,
      navigationOptions: {
        tabBarVisible: false
      }
    });

    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );

  }
}

WelcomeScreen.js

...

componentDidMount(){
  this.props.checkForToken(); // async method 
}

// Async Action 
 export const checkForToken = () => async dispatch => {
   console.log("action - does token exist ?");
   let t = await AsyncStorage.getItem("jwt");
   if (t) {
     console.log("action - token exists");
     // Dispatch an action, login success
     dispatch({ type: LOGIN_SUCCESS, payload: t });
   } else {
     return null;
   }
 }

// WelcomeScreen.js continued

componentWillRecieveProps(nextProps){
  this.authComplete(nextProps);
}

authComplete(props){
  if(props.token){
    props.navigation.navigate('map'); // called again and again when I try to navigate from within the Bottom Tab Bar Component 
  }
}

render(){
  if(this.props.appLoading){ // default True 
    return ( <ActivityIndicator />);
  }
  return ( <Text>WelcomeScreen</Text> );
}

const mapStateToProps = state => {
  return {
    token: state.auth.token,
    appLoading: state.auth.appLoading // default True 
  };
};

export default connect(mapStateToProps, actions)(WelcomeScreen);

Answer 1

Я бы посоветовал не хранить состояние навигации в редуксе. Просто перейдите, когда вы нашли токен или пользователь вошел в систему.

Если вы все еще хотите использовать redux или просто хотите реагировать на изменения реквизита, тогда вы можете использовать некоторый Redirect Component и отображать его только тогда, когда токен изменился с ничего на что-то. О такой реализации вы можете прочитать на веб-маршрутизаторе здесь . Я думаю, что нет такой реализации для React Navigation.

Когда вы используете React Navigation, я бы посоветовал изучить документы, потому что я думаю, что это решает вашу проблему. https://reactnavigation.org/docs/en/auth-flow.html