AWS 放大自定义问候语

Question

我用 Amplify withAuthenticator HoC 创建了一个围绕 Route 对象 (react-router-dom) 的包装器，这样我就可以确保它们只对登录用户可用，并显示 Amplify 登录屏幕对于那些没有登录的人来说。这非常有效，登录后我可以看到整个页面的顶部都有问候栏（白色栏显示 "Hello X"，右边有一个橙色注销按钮）。我不仅要修改此按钮的样式（我更喜欢绿色按钮），而且我还想在左侧添加一些菜单按钮以用于导航。

不幸的是，无论我尝试什么，要么在 Greetings 下方创建另一个栏，要么 Greetings 就消失了。我试过这个：

import React from 'react';
import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator, Greetings } from 'aws-amplify-react';
import AuthGreeting from './views/AuthGreeting'

export const AuthRouter = props => (
    <div>
        {props.children}
    </div>
)

export default withAuthenticator(AuthRouter, false,[
    <AuthGreeting override='Greetings'/>,
    <ConfirmSignIn/>,
    <VerifyContact/>,
    <SignUp/>,
    <ConfirmSignUp/>,
    <ForgotPassword/>,
    <RequireNewPassword />
]);

以及

export const AuthRouter = props => (
    <Authenticator hide={['Greetings']}>
        <AuthGreeting override={'Greetings'}/>
        {props.children}
    </Authenticator>

export default AuthRouter;

我尝试了使用和不使用覆盖参数。

我的 AuthGreeting class 是这样的：

import React, { Component } from 'react';
import { NavBar, Nav, NavRight, Greetings } from 'aws-amplify-react';

class AuthGreeting extends Greetings{
    constructor(props){
        super(props);
    }

render()
{
    const theme = this.props.theme;
    return(
        <NavBar theme={theme}>
            <Nav theme={theme}>
                <NavRight theme={theme}>
            <p>Test</p>
            </NavRight>
            </Nav>
        </NavBar>
    )
}
}

export default AuthGreeting;

你知道我做错了什么吗？如果您有一些建议，我将如何用自定义的问候栏替换默认的问候栏，那就太好了。

提前致谢:)

问候克里斯蒂安

Answer 1

我现在已经用不同的方式解决了。我用

export default withAuthenticator(AuthRouter, false) //Show no Greetings

此外，我通过

获取当前登录用户

Auth.currentAuthenticatedUser({
bypassCache: false}).then(data => this.login(data)) //save username and groups in redux if available
.catch(err => this.logout());} //clear username and groups in redux

并添加一个侦听器，每次用户登录或关闭时都会更新 redux

const listener = async (data) => {
    switch (data.payload.event) {

        case 'signIn':
            logger.error('user signed in');
            await this.login(data.payload.data)
            break;
        case 'signOut':
            logger.error('user signed out');
            await this.logout()
            break;          
    }
}

Hub.listen('auth', listener);

我在 App.js 的 componentDidMount() 中添加了两者，并在 index.js 中添加了 StoreProvider，这样我就可以访问 Redux

我的包装器还加载了另一个包装器，它会在用户登录时检查 redux，然后显示菜单。

这样我还可以检查用户是否是组的成员，因此只显示他有权观看的菜单条目。

AWS 放大自定义问候语

AWS amplify customized Greetings

reactjs

aws-amplify