reactjs - 是否可以通过 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

我可能会迟到回答，但您应该使用 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);