AEM中点击登录登出按钮modal模态框不弹出问题排查

点击锚点只跳转URL、模态框不弹出，是3处代码错误共同导致的：

• 外层按钮容器类名不匹配：HTML里容器写的class是ranosys-sign-in-buttons，但两个JS文件的选择器、配套CSS都用的xyz-sign-in-buttons前缀，直接导致用户身份校验接口地址拿不到，按钮显隐逻辑完全失效
• 事件绑定未等待DOM加载：两个JS的DOM选择、事件绑定逻辑都在顶层作用域直接执行，如果脚本在<head>中提前加载，会出现选不到<body>元素的问题，modal.js里写的点击事件委托根本没绑定成功，点击按钮时不会执行弹框逻辑，只会触发锚点默认跳转，URL就会带上#sign-out
• 按钮默认显隐无兜底：代码没有给登录/登出按钮加初始隐藏逻辑，身份校验失败时两个按钮会同时显示，容易出现误触

1. 修正HTML容器类名 #

把外层div的class改成和JS匹配的名称，修正后片段：

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
     data-sly-test.hasContent="${properties.signInLabel != '' && properties.signInXfPath != '' && properties.signOutLabel != '' && properties.signOutXfPath != '' }"
     class="xyz-sign-in-buttons"
     data-current-user-url="/libs/granite/security/currentuser.json">

    <span
       class="xyz-sign-in-buttons__button xyz-sign-in-buttons__button--greeting"
       id="ranosysGreetingLabel"
       >${properties.greetingLabel @ i18n}</span>

    <a href="#sign-in"
       class="xyz-sign-in-buttons__button xyz-sign-in-buttons__button--sign-in"
       data-modal-url="${ properties.signInXfPath @ selectors='content', extension = 'html'}"
       data-sly-test="${properties.signInLabel != '' }">${properties.signInLabel}</a>

    <a href="#sign-out"  
       class="xyz-sign-in-buttons__button xyz-sign-out-buttons__button--sign-out"
       data-modal-url="${ properties.signOutXfPath @ selectors='content', extension = 'html'}"
       data-sly-test="${properties.signOutLabel != '' }">${properties.signOutLabel}</a>

</div>
<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!hasContent}"></sly>

2. 给JS逻辑加DOM加载完成包裹 #

确保DOM树渲染完成后再执行选择元素、绑定事件的操作，同时补全逻辑兜底。

修正后的sign_in/out_button.js #

import $ from "jquery";

$(function() {
    const currentUserUrl = $('.xyz-sign-in-buttons').data('current-user-url'),
        signIn = $('[href="#sign-in"]'),
        signOut = $('[href="#sign-out"]'),
        greetingLabel = $('#ranosysGreetingLabel'),
        greetingText = greetingLabel.text(),
        body = $('body');

    // 初始先隐藏所有按钮，等身份校验完成再显示对应按钮
    signIn.hide();
    signOut.hide();
    greetingLabel.hide();

    $.getJSON(currentUserUrl + "?nocache=" + new Date().getTime(), function(currentUser) {
        const isAnonymous = 'anonymous' === currentUser.authorizableId;

        if(isAnonymous) {
            signIn.show();
            body.addClass('anonymous');
        } else {
            signOut.show();
            greetingLabel.text(greetingText + ", " + currentUser.name);
            greetingLabel.show();
            body.addClass('logged-in');
        }
    }).fail(function() {
        // 接口请求失败时默认显示登录按钮，避免按钮全不可见
        signIn.show();
        body.addClass('anonymous');
    });
});

修正后的modal.js #

import $ from "jquery";

$(function() {
    let visible = false;
    
    function showModal(e) {
        e.preventDefault();

        const xfUrl = $(this).data('modal-url');

        if (visible || !xfUrl) { return; }
        const showModalEvt = new Event('xyz-modal-show');
        const body = document.querySelector('body');

        $.get(xfUrl, function (data) {
            const modal = $('<div id="xyz-modal"/>');
            $('body').append(modal.append(data));
            modal.fadeIn(300, function() { visible = true; });
            // 触发模态框展示事件，供登录表单逻辑获取当前页地址做跳转
            body.dispatchEvent(showModalEvt);
        });

        return false;
    }

    function hideModal(e) {
        const modal = $('#xyz-modal');
        // 点击模态框外部区域时关闭弹框
        if (visible && modal && !modal.is(e.target) && modal.has(e.target).length === 0) {
            e.preventDefault();

            modal.fadeOut(200, function(){
                modal.remove();
                visible = false;
            });

            return false;
        }
    }

    // 绑定弹框触发事件
    $('body').on('click', '[data-modal-url]', showModal);
    // 绑定弹框关闭事件
    $(document).on('click', hideModal);
});

3. 补全CSS兜底样式 #

避免JS加载过程中按钮提前显示，注意把之前所有写错的.ranosys-sign-in-buttons前缀全部替换成.xyz-sign-in-buttons：

.xyz-sign-in-buttons__button--sign-in,
.xyz-sign-in-buttons__button--sign-out,
.xyz-sign-in-buttons__button--greeting {
    display: none;
}
body.anonymous .xyz-sign-in-buttons__button--sign-in {
    display: inline-block;
}
body.logged-in .xyz-sign-in-buttons__button--sign-out,
body.logged-in .xyz-sign-in-buttons__button--greeting {
    display: inline-block;
}

清理浏览器缓存、AEM页面缓存后重新加载：

• 未登录状态只显示登录按钮，点击不会跳转URL，正常弹出模态框
• 登录状态只显示问候语和登出按钮，点击登出正常弹出对应模态框
• 不会出现两个按钮同时显示、点击跳锚点的问题

内容的提问来源于stack exchange，提问作者Janhavi Singh