AWS Amplify: onStatusChange затем отображает главную страницу

Question

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

index.js

class App extends Component {

  /*
  constructor(props) {
    super(props);
    this.state = {
        authState: null,
        authData: null
    }
}
*/
handleAuthStateChange(state) {
  alert(state)
  if (state === 'signedIn') { 
    alert('here');
    return ( // go To Entry point of app
      <ApolloProvider store={store} client={client}>
      <AppWithNavigationState/>
      </ApolloProvider>
    );
  }
}

    render() {
      //const { authState, authData } = this.state;
     // const signedIn = (authState === 'signedIn');


        return (
         <Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange}>
        <Login/>
        </Authenticator>

      );
    }

}
export default App = codePush(App);

Login.js

export default class Login extends Component {


    render() {

       const { authState, onStateChange } = this.props;

       if (!['signIn', 'signedOut', 'signedUp'].includes(authState)) {
           alert('login')
        return null;
       }


        return (<View style={styles.container}>

            <View style={styles.backgroundContainer}>
            <Image source={images.icons.LoginImage} style={styles.backgroundImage} />
            </View>
            <View style={styles.overlay}>
            <Button iconLeft light rounded style={styles.facebookLoginButton}>
            <Icon style={styles.facebookIcon} name='logo-facebook' />
            <Text style={styles.facebookButtonText}>Login with Facebook</Text>
            </Button>
            <Button rounded bordered light style={styles.loginLaterButton}
            onPress={() => onStateChange('signedIn')}>
            <Text style={styles.buttonText}>Sign In Test</Text>
            </Button>


            </View>

            </View>

        );
      }
    }

Answer 1

Это на самом деле касается рендеринга и состояния (и не имеет ничего общего с AWS Amplify). Сначала настройте состояние в вашем конструкторе:

constructor(props) { super(props); this.state = { authState: '' }; }

Тогда ваш onAuthStateChange() будет выглядеть так:

onAuthStateChange(newState) { if (newState === 'signedIn') { this.setState({ authState: newState }); } }

Наконец, в вашем render() метод, вы настраиваете ваш рендеринг так, чтобы он делал "правильные вещи" в зависимости от вашего состояния авторизации.

render() { if (this.state.authState === 'signedIn') { return (<ApolloProvider ...><MyApp/></ApolloProvider>); } else { return (<Authenticator .../>); } }

Вы также можете абстрагировать это с помощью HOC (так же, как withAuthenticator() HOC от AWS Amplify делает это). По сути, аутентификатор отображается изначально. Как только состояние SignIn получено, состояние внутреннего компонента обновляется, и это вызывает повторную визуализацию компонента с остальной частью вашего приложения.

Answer 2

Если вы решили это, я надеюсь, что это поможет кому-то еще.

Я думаю, что следующий вариант лучше, чем использование onAuthStateChange:

от Amplify dox:

import { Auth } from 'aws-amplify';

Auth.currentAuthenticatedUser({
    bypassCache: false  // Optional, By default is false. If set to true, this call will send a request to Cognito to get the latest user data
}).then(user => console.log(user))
.catch(err => console.log(err));

Вы можете добавить свою логику в ".then(user => ...", чтобы добавить маршрут к вашим защищенным страницам. Также вы можете перенаправить на страницу входа из ".catch(err =>").

Если вы включили приведенный выше код в функцию и вызвали его из 'componentWillReceiveProps', он должен вызываться каждый раз при изменении статуса авторизации.