时间戳

首页 > 解决方案 > 如何防止用户退出时弹出登录对话框

reactjs - 如何防止用户退出时弹出登录对话框

问题描述

我有一个弹出对话框，显示用户单击登录时。这允许用户使用电子邮件/密码或谷歌登录。他们也可以从这里注册。

问题是，一旦他们登录，登录链接就会更改为注销。当您单击注销链接时，它会注销用户，但随后会再次显示登录对话框。据我所知，它不应该这样做。它检查是否有 currentUser，如果有，则启动注销过程，否则显示对话框。

当用户退出时，如何防止它显示对话框？

const Header = ({ currentUser, hidden, signOutStart }) => {
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <sc.HeaderContainer>
            <sc.LogoContainer to={'/'}>
                <Logo className={'logo'} />
            </sc.LogoContainer>
            <sc.OptionsContainer>
                <sc.OptionLink to={'/shop'}>SHOP</sc.OptionLink>
                <sc.OptionLink to={'/contact'}>CONTACT</sc.OptionLink>
                {currentUser ? (
                    <sc.OptionLink as={'div'} to={'/#'} onClick={signOutStart}>
                        SIGN OUT
                    </sc.OptionLink>
                ) : (
                    <sc.OptionsContainer>
                        <sc.OptionLink onClick={handleClickOpen} to={'/#'}>SIGN IN</sc.OptionLink>
                        <SignInSignUpDialogue onClose={handleClose} open={open} />
                    </sc.OptionsContainer>
                )}
                <CartIcon />
            </sc.OptionsContainer>
            {hidden ? null : <CartDropdownContainer />}
        </sc.HeaderContainer>
    );
};
const mapStateToProps = createStructuredSelector({
    currentUser: selectCurrentUser,
    hidden: selectCartHidden,
});

const mapDispatchToProps = dispatch => ({
    signOutStart: () => dispatch(signOutStart()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

标签： reactjsfirebase-authenticationmaterial-uimodal-dialog

解决方案

添加了signOut功能：

const signOut = () => {
    signOutStart();
    setOpen(false);
};

并改变：

<sc.OptionLink as={'div'} to={'/#'} onClick={signOutStart}>

至：

<sc.OptionLink as={'div'} to={'/#'} onClick={signOut}>

推荐阅读