Внедрение AWS Amplify Authenticator с помощью React и Ant Design Pro / UmiJS

Я пытаюсь реализовать аутентификатор AWS Amplify в Ant Design Pro / UmiJS

В файле UmiJS config.ts у меня такая конфигурация:

routes: [
(...){
  path: '/',
  component: '../layouts/AwsSecurityLayout',
  routes: [
    {
      path: '/',
      component: '../layouts/BasicLayout',
      authority: ['admin', 'user'],
      routes: [
        {
          path: '/links',
          name: 'fb.links',
          icon: 'BarsOutlined',
          component: './Links',

        },(...)

Базовый компонент AwsSecurityLayout обертывает маршруты, которые будут охранять. Выглядит так:

import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';
import { PageLoading } from '@ant-design/pro-layout';

class AwsSecurityLayout extends React.Component {

  render() {
    const { children } = this.props;

    if (!children) {
      return <PageLoading />;
    }

    return children;
  }
}

export default withAuthenticator(AwsSecurityLayout);

Пошел Я использую функцию withAuthenticator, реквизиты из UmiJ не передаются в компонент, поэтому props и props.child не определены.

Исходный файл от Ant Design Pro:

import React from 'react';
import { PageLoading } from '@ant-design/pro-layout';
import { Redirect, connect, ConnectProps } from 'umi';
import { stringify } from 'querystring';
import { ConnectState } from '@/models/connect';
import { CurrentUser } from '@/models/user';

interface SecurityLayoutProps extends ConnectProps {
  loading?: boolean;
  currentUser?: CurrentUser;
}

interface SecurityLayoutState {
  isReady: boolean;
}

class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
  state: SecurityLayoutState = {
    isReady: false,
  };

  componentDidMount() {
    this.setState({
      isReady: true,
    });
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
  }

  render() {
    const { isReady } = this.state;
    const { children, loading, currentUser } = this.props;
    // You can replace it to your authentication rule (such as check token exists)
    // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
    const isLogin = currentUser && currentUser.userid;
    const queryString = stringify({
      redirect: window.location.href,
    });

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading />;
    }
    if (!isLogin && window.location.pathname !== '/user/login') {
      return <Redirect to={`/user/login?${queryString}`} />;
    }
    return children;
  }
}

export default connect(({ user, loading }: ConnectState) => ({
  currentUser: user.currentUser,
  loading: loading.models.user,
}))(SecurityLayout);

Я просто оборачиваю компонент, используя withAuthenticator


reactjs amazon-web-services aws-amplify antd ant-design-pro
person Fabián Balmaceda    schedule 23.06.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я решил использовать документ условного рендеринга: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#manage-auth-state-and-conditional-app-rendering

код:

import React from 'react';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';

const AwsSecurityLayout: React.FunctionComponent = (props: any | undefined) => {
  const [authState, setAuthState] = React.useState<AuthState>();
  const [user, setUser] = React.useState<any | undefined>();

  React.useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);

  return authState === AuthState.SignedIn && user ? (
    props.children
  ) : (
      // TODO: change style / implement https://github.com/mzohaibqc/antd-amplify-react
      <AmplifyAuthenticator />
    );
}

export default AwsSecurityLayout;
person Fabián Balmaceda    schedule 24.06.2020
comment
что вам за отличный ответ! из интереса, где вы разместили биты конфигурации (ниже). Ничего не могу добавить в .umi / umi.ts как временную папку. изо всех сил пытается найти точку входа в приложение. импортировать Amplify из aws-ampify; импортировать awsExports из ./aws-exports; Amplify.configure (awsExports); - person sheeni; 04.07.2020