AWS усилить индивидуальные приветствия

Question

Я создал оболочку, которая окружает объекты Route (react-router-dom) с Amplify withAuthenticator Ho C, чтобы я мог убедиться, что они доступны только для зарегистрированных пользователей, и вместо них отображается экран Amplify Login для тех, кто не вошел в систему. Это работает отлично, и после входа в систему я вижу, что на целых страницах есть панель приветствий (белая полоса с надписью «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;

Я пробовал как с параметром переопределения, так и без него.

Мой класс 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;

Ты хоть представляешь, что я делаю не так? Было бы замечательно, если бы у вас было несколько советов, как я могу заменить панель приветствий по умолчанию на настроенную.

Заранее спасибо:)

С уважением, Кристиан

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

и добавляю прослушиватель, который будет обновлять приставку каждый раз, когда пользователь входит в систему с

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

Я добавил оба в componentDidMount () моего приложения. js с StoreProvider в индексе. js, чтобы я мог получить доступ к Redux

Моя оболочка также загружает другую оболочку, где она проверяет избыточность если пользователь вошел в систему и отобразит меню, то.

Таким образом, я также могу проверить, является ли пользователь членом группы и, следовательно, отображать только те пункты меню, которые он имеет права на просмотр.