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() 方法中，您调整渲染以使其 "the right thing" 根据您的身份验证状态。

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

您也可以使用 HOC 将其抽象化（与来自 AWS Amplify 的 withAuthenticator() HOC 的做法相同）。基本上，最初会显示 Authenticator。一旦收到 signedIn 状态，内部组件状态就会更新，这会导致组件与应用程序的其余部分一起重新呈现。

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' 调用它，则每次身份验证状态更改时都应调用它。

AWS Amplify：onStatusChange 然后呈现主页

AWS Amplify: onStatusChange then render main page

javascript

react-native

aws-amplify

index.js

Login.js