时间戳

首页 > 解决方案 > AWS 放大自定义问候语

reactjs - AWS 放大自定义问候语

问题描述

我创建了一个使用 Amplify withAuthenticator HoC 围绕 Route 对象（react-router-dom）的包装器，因此我可以确保它们仅对登录用户可用，并为未登录的用户显示 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;

我尝试了使用和不使用 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;

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

提前致谢 ：）

问候克里斯蒂安

标签： reactjsaws-amplify

解决方案

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

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 并显示菜单。

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

推荐阅读