Пользовательский интерфейс для AWS Amplify with Authenticator не будет запускать мое приложение после входа в систему - PullRequest
Новая
       53

Пользовательский интерфейс для AWS Amplify with Authenticator не будет запускать мое приложение после входа в систему

0 голосов
/ 17 марта 2020

Я создал свой собственный пользовательский интерфейс для AWS Усиление. Я следую руководству по усилению того, как мне следует это делать, а именно с помощью Authenticator, переопределяя методы showComponent() для SignIn и RequireNewPassword. Это все хорошо работает. Я могу войти и изменить свой пароль. Моя проблема в том, что я не могу на всю жизнь заставить работать маршрут моего приложения по умолчанию после входа в систему.

Я использую общую настройку AppWithAuth: 

export default class AppWithAuth extends React.Component<{}, { authState: string }> {
  classes: any;
  constructor(props) {
    super(props);
    this.state = { authState: '' };
    this.handleAuthStateChange = this.handleAuthStateChange.bind(this);
  }

  handleAuthStateChange(state) {
    this.setState({ authState: state });
  }

  render() {
    return (
        <div>
          {this.state.authState === 'signedIn' ? (
            <Authenticator
              theme={authTheme}
              hideDefault={true}
              //hide={[SignIn, RequireNewPassword]}
              amplifyConfig={awsconfig}
              onStateChange={this.handleAuthStateChange}>
              <App />
            </Authenticator>
          ) : (
            <Authenticator
              theme={authTheme}
              hideDefault={true}
              //hide={[SignIn, RequireNewPassword]}
              amplifyConfig={awsconfig}
              onStateChange={this.handleAuthStateChange}>
              <ChangePassword {...this.props} />
              <Login override={SignIn} {...this.props} />
            </Authenticator>
          )}
        </div>
    );
  }
}

Login extends SignIn и отображается только в том случае, если this._validAuthStates = ['signIn', 'signedOut', 'signedUp'];

ChangePassword расширяет RequireNewPassword, и отображается только в том случае, если this._validAuthStates = ['requireNewPassword'];

Оба эти пути ведут себя ожидаемым образом. Это следующий шаг, который поставил меня в тупик.

Это мой класс приложения: 

import React from 'react';
import { AuthPiece } from 'aws-amplify-react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
...

interface AppProps {
  authState?: any;
}
export default class App extends AuthPiece<AppProps, {}> {

  constructor(props) {
    super(props);
    this._validAuthStates = ['signedIn'];
  }

  showComponent() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route component={LoggedIn} />

            ...bunch of routes

          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

Насколько я понимаю, установив this._validAuthStates = ['signedIn'];, оно должно отображать мое приложение (согласно https://aws-amplify.github.io/docs/js/authentication#show - ваше приложение после входа в систему )

Кто-нибудь знает, что я делаю неправильно? Кажется, полностью игнорировать компонент приложения. Должен ли я расширять AuthPiece?

Приветствия

Обновление Обновлен AppWithAuth.tsx Я, кажется, отследил его до маршрутизатора и как он себя ведет. Если я просто отображаю простую страницу реакции, это нормально, в противном случае она, кажется, перенаправляет, но не загружает нужную мне страницу.

1 Ответ

0 голосов
/ 20 марта 2020

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

...