我已经使用 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 类是这样的:

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;

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

提前致谢:)

问候基督徒

最佳答案

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

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，然后显示菜单。

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

https://stackoverflow.com/questions/60900630/