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

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

・您的想法3

我在componentDidUpate（）中插入了console.log（“ login in !!”），但登录后却无法正常工作

也许我必须使用1或2的方式，但是如果您知道为什么它不起作用，请在这里写下来回答先生^^

Answer 1

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

set my_string='fooo~12345';
set search_for_me = '~';
SELECT SUBSTR($my_string, 1, DECODE(position($search_for_me, $my_string), 0, length($my_string), position($search_for_me, $my_string)));

Answer 2

您可以在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中的组件不需要重新渲染。

通过AWS Amplify的withAuthenticator（）登录后是否可以触发功能？

回答赫斯特（J.Hesters）

2 个答案: