AWS Amplify的withAuthenticator()登录后是否可以触发功能？

Question

我想在用户通过Amplify的withAuthenticator()登录时触发功能。（我需要通过 React.js 的 contextAPI 将状态数据发送到其他组件）

我找到了 SignIn() 函数的解释，但是我没有找到关于用户登录时函数的解释

▼Main.tsx（首页，大家可以看看）

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from './Login';
import Mypage from './mypage/Index';
import Menu from './Menu';
import Hoge from './Hoge';

class Main extends React.Component {

    render(){
        return (
            <div className="Main">
                <Router>
                    <Menu />

                     //**Mypage ← only logged in can watch
                    <Route exact path="/mypage" component={Mypage} />
                    <Route path="/main" component={Hoge} />
                </Router>
            </div>
        );
    }
}

export default Main;

▼mypage.tsx（登录用户可观看）

import React from 'react';
import { RouteComponentProps, Link } from 'react-router-dom';
import { withAuthenticator } from 'aws-amplify-react';
import Auth from '@aws-amplify/auth';
import AuthContext from '../context/auth-context';

interface MatchParams {
    id: number;
}

interface State {
    user: '',
}

class Mypage extends React.Component<RouteComponentProps<MatchParams>, State> {
    constructor(props: RouteComponentProps) {
        super(props);
        this.state = { user: '' };
    }

    async componentDidMount() {
        let user = await Auth.currentAuthenticatedUser()
        this.setState({user: user.username});
    }

   //**(it's just what I want now)
   //loggedIn() {
   //     console.log("logged in!");
   //}

    render() {
        return (
            <div className="mypage">
                <h1>mypage</h1>
                <div>
                    <ul>
                        <li><Link to='hoge'>hoge</Link></li>
                    </ul>
                </div>
            </div>
        );
    }
}

export default withAuthenticator(Mypage);

回答J.Hesters

・你的想法 1,2

实际上我考虑过这些想法（自己创建登录表单），但我想知道没有它们它是如何工作的（我应该在第一时间写下来）

・你的想法 3

我在 componentDidUpate() 中插入了 console.log("login in!!") 但登录后它没有工作

也许我必须使用方法 1 或 2，但是如果你明白为什么它不起作用你的想法 3，请写在这里无论如何感谢先生的回答 ^^

Answer 1

你可以在 await 关键字后写任何你想执行的代码。

async componentDidMount() {
  let user = await Auth.currentAuthenticatedUser();
  this.setState({user: user.username});
  console.log('logged in.');
}

编辑：

据我所知，您不能显式覆盖 withAuthenticator 的方法。所以就我而言，你有三个选择：

Supply a custom <SignIn /> component 使用身份验证器，您可以在其中手动处理登录过程，并在登录方法完成后立即调用您喜欢的任何功能。
自己编写整个 UI 登录 UI 并在需要时明确使用 Amplify 的 Auth 方法。 Here is an example repository 正在做。
使用 componentDidUpdate() 在用户登录时组件重新呈现后触发代码。注意不要使用 setState 创建无限循环。 componentDidUpdate 仅在组件重新呈现时被调用。 withAuthenticator 中的组件不必重新渲染。

Answer 2

我可能会迟到回答，但你应该使用 Amplify Logger。然后，您可以根据事件发生的时间在需要时启动任何代码。我会做这样的事情。

import { Hub, Logger } from 'aws-amplify';

const logger = new Logger('Logger', 'INFO');
const listener = (data) => {

  switch (data.payload.event) {
    case 'signIn':
      logger.info('user signed in');
      break;
    case 'signUp':
      logger.info('user signed up');
      break;
    case 'signOut':
      logger.info('user signed out');
      break;
    case 'signIn_failure':
      logger.info('user sign in failed');
      break;
    case 'configured':
      logger.info('the Auth module is configured');
      break;
    default:
      logger.error('Something went wrong, look at data object', data);
  }
}

Hub.listen('auth', listener);

AWS Amplify的withAuthenticator()登录后是否可以触发功能？

Is it possible to trigger function after logging in by withAuthenticator() of AWS Amplify?

typescript

reactjs

amazon-cognito

aws-amplify

回答J.Hesters