AWS放大自定义问候语

Question

我创建了一个包装器，用Amplify withAuthenticator HoC包围Route对象(react router dom(，这样我就可以确保它们只对登录用户可用，并为未登录的用户显示Amplify登录屏幕。这非常完美，登录后，我可以看到整个页面的顶部都有Greetings栏(白色栏上写着"Hello X"，旁边有一个橙色的注销按钮(。我不仅想修改这个按钮的样式(我更喜欢绿色按钮(，而且我还想在左侧添加一些菜单按钮，用于导航。

不幸的是，无论我尝试什么，我要么在问候语下面创建另一个酒吧，要么问候语就消失了。我试过这个：

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;

我尝试了使用和不使用override参数。

我的AuthGreeting课程是这样的：

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;

你知道我做错了什么吗？如果你能给我一些建议，我可以用一个定制的来代替默认的问候栏，那就太好了。

提前感谢：(

问候Christian

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);

我用index.js中的StoreProvider将两者都添加到了App.js的componentDidMount((中，这样我就可以访问Redux

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

通过这种方式，我还可以检查用户是否是组的成员，因此只显示他有权观看的菜单项。