Question

我试图在用户未登录时使用Amplify Authenticator阻止对我的应用程序的访问。

 <Authenticator includeGreetings={true}>
            <Provider store={dataStore}>
                <Router history={hist}>
                    <MyView>
                    </MyView>
                </Router>
            </Provider>
        </Authenticator>

在我的组件MyView的render方法中，我尝试通过以下方式进行简单的身份验证：

if (this.props.authState !== 'signedIn') {
            return (<></>);
        }

但是由于某些原因，在if条件下检查auth状态时，它是未定义的。

为什么未定义该属性-我在文档中了解到该属性已向下传递到所有子组件。
1. 我的方法正确吗？我在文档中看到您可以实现showComponent（theme）方法，并且仅当用户处于特定状态时，身份验证器才会调用该方法但是我需要在何时调用此方法时为身份验证器设置正确的状态通过 this._validAuthStates = ['signedIn'];

但是我不知道在哪里调用该方法，我在任何地方都无法访问此方法。

我们将不胜感激。

Answer 1

不是专家，但我遇到了这个问题，并且以与您似乎相同的方式来处理文档。

我偶然发现了一个解决方案

在索引中，我以这种方式渲染组件

    <Provider store={store}>
      <Authenticator
          hide={[SignUp, SignIn, Greetings]}
      >
        <CustomGreetings/>
        <CustomSignUp/>
        <CustomSignIn/>
        <App/>
      </Authenticator>
    </Provider>

现在，在我的应用程序组件中，我可以访问authState。因此，我将其重新注入其他组件中：

return(
  <Router>
    <NavbarComponent/>
    <Switch>
      <Route path="/dashboard">
        <DashboardContainer authState={this.props.authState}/>
      </Route>
      <Route path="/admin">
        <AdminComponent authState={this.props.authState}/>
      </Route>
    </Switch>
  </Router>
);

我不知道这是否是解决方案，但是对我来说，它可行

AWS Amplify HOC Authenticator React不会将authState属性传递给包装的组件

1 个答案: