How To
A JQuery will be used, it will perform the following:
- Target the logout <a> anchor
- Interrupt any action on it by using event.preventDefault()
- Execute the logout API inside the function'
Script:
$(document).ready(function(){
logoutBtn = $('a[href="/jw/j_spring_security_logout"');
$.each(logoutBtn, (k,v)=>{
console.log($(v));
$(v).on('click', function(e){
e.preventDefault();
//Logout current app (optional)
window.location.href = "http://localhost:8080/jw/j_spring_security_logout";
//API Logout
window.location.href = "https://{hostname}/api/login/logout";
})
})
})
Insert the script into the Custom Javascript field inside the UI Builder advanced settings:
Figure 1: Paste script into Custom JavaScript field
Known Issue
You may encounter this alert message and do not want it to appear. Here's how to fix it.
Figure 2: Changes alert box
Use the following script instead, it will inform the browser not to execute any other "beforeunload" event handlers once this one is triggered.
Keep in mind that using stopImmediatePropagation in this context can have side effects. If there are other tasks or clean-up operations you need to perform when the page is unloaded, they will be skipped. It's important to consider the broader context of your application and whether this behavior aligns with your goals.
Script:
window.addEventListener("beforeunload",function (event){
event.stopImmediatePropagation();
})
$(document).ready(function(){
logoutBtn = $('a[href="/jw/j_spring_security_logout"');
$.each(logoutBtn, (k,v)=>{
console.log($(v));
$(v).on('click', function(e){
e.preventDefault();
//Logout current app
window.location.href = "http://localhost:8080/jw/j_spring_security_logout";
//API Logout
window.location.href = "https://{hostname}/api/login/logout";
})
})
})
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event