AEM注销使用jquery和modal

Question

我在aem中创建了一个sign_in按钮，并试图在sign_in锚标记上调用模态，这将调用我的modal.js。但是当我点击锚标签模态不弹出，我的url更改为https:localhost:4502/content/my-website/home.html#sign_out。我不太擅长使用jquery，所以我不知道我哪里出错了

是供参考的代码。sign_in/out button .html

<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="ranosys-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>

**sign_in/out_button.js**
import $ from "jquery";

// alert("hiii");
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');
$.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();
}
});

**modal.js**
import $ from "jquery";

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; });
visible = true;
// dispatch event to indicate that the modal has been shown
// used by sign-in-form.js to dynamically update a successful sign-in redirect to the current page
body.dispatchEvent(showModalEvt);
});
return false;
}
function hideModal(e) {
const modal = $('#xyz-modal');
// if the target of the click isn't the modal nor a descendant of the 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;
}
}

/*eslint no-use-before-define: ["error", { "functions": false }]*/
/**
* Handle clicking of the Sign In button
*/
$('body').on('click', '[data-modal-url]', showModal);

/**
* Handle clicking "off-modal" to hide it
*/
$(document).on('click', (hideModal));

Answer 1

似乎你正在从XF取回HTML;

如果您想通过基于AEM使用验证的表单退出。#1 -你可以使用以下锚;在XF中添加锚标记

<a href="/system/sling/logout.html">Log Out</a>

你也可以通过ajax访问(/system/sling/logout.html)。

#2 -你可以写你的自定义退出servlet和在按钮上点击事件模式，可以点击servlet退出。

你也可以举一个-org.apache.sling.auth.core.impl.LogoutServlet

的例子