javascript - 找到 JWT 后如何导航一次？

Question

我刚刚陷入 react native ，需要一些帮助才能在找到 token 时导航到 protected 屏幕。我应该在哪里寻找应用程序加载时的 token ？如何在不多次调用导航的情况下导航用户一次？我遇到的问题是我正在检查组件安装上的 token ，该 token 嵌套在堆栈内。如果我导航到堆栈的另一部分，则会再次调用该函数，并且我无法导航。我可以检索堆栈外部的 token ，但随后我在导航时遇到问题，因为我需要在屏幕组件内传递 props.navigate 。查找 token 和进行导航的推荐方法是什么？

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 中。只需在找到 token 或用户登录时进行导航即可。

如果您仍然想使用 redux 或者只是想对 props 更改使用react，那么方法是使用一些重定向组件，并仅在 token 从无变为有时才渲染它。您可以从react-router here 阅读有关此类实现的信息。 。我认为 React Navigation 没有这样的实现。

当您使用 React Navigation 时，我建议您查看文档，因为我认为它解决了您遇到的问题。 https://reactnavigation.org/docs/en/auth-flow.html