Add AbpAuthenticationSessionStateViewComponent to logout from other tabs for MVC UI

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/AbpAspNetCoreMvcUiThemeSharedModule.cs

@@ -3,8 +3,11 @@ using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages;
 using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpAuthenticationSessionState;
+using Volo.Abp.AspNetCore.Mvc.UI.Theming;
 using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 using Volo.Abp.Modularity;
+using Volo.Abp.Ui.LayoutHooks;
 using Volo.Abp.VirtualFileSystem;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared;
@@ -30,6 +33,11 @@ public class AbpAspNetCoreMvcUiThemeSharedModule : AbpModule
         {
             options.FileSets.AddEmbedded<AbpAspNetCoreMvcUiThemeSharedModule>("Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared");
         });
+        
+        Configure<AbpLayoutHookOptions>(options =>
+        {
+            options.Add(LayoutHooks.Body.Last, typeof(AbpAuthenticationSessionStateViewComponent));
+        });
 
         Configure<AbpBundlingOptions>(options =>
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpAuthenticationSessionState/AbpAuthenticationSessionStateViewComponent.cs

@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpAuthenticationSessionState;
+
+public class AbpAuthenticationSessionStateViewComponent : AbpViewComponent
+{
+public virtual IViewComponentResult Invoke()
+{
+    return View("~/Pages/Shared/Components/AbpAuthenticationSessionState/Default.cshtml");
+}
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Pages/Shared/Components/AbpAuthenticationSessionState/Default.cshtml

@@ -0,0 +1,61 @@
+<script type="text/javascript">
+    (function () {
+        const sessionKey = 'authentication-session-id';
+        
+        if (!abp || !abp.currentUser){
+            return;
+        }
+
+        abp.authenticationSessionStateValidator = {
+            init: function () {
+                this.checkSessionState();
+                this.setSessionState()
+            },
+            setSessionState: function () {
+                if (!abp.currentUser.isAuthenticated){
+                    localStorage.removeItem(sessionKey);
+                    return;
+                }
+                
+                var sessionId = localStorage.getItem(sessionKey);
+                if (!sessionId){
+                    sessionId = abp.currentTenant.sessionId ?? this.randomUUID();
+                }
+                
+                localStorage.setItem(sessionKey, sessionId);
+            },
+            checkSessionState: function () {
+                window.addEventListener('storage', function (event) {
+
+                    console.log(event);
+                    if (event.key !== sessionKey) {
+                        return;
+                    }
+
+                    var previousSessionId = event.oldValue
+                    var sessionId = event.newValue;
+
+                    if(previousSessionId === sessionId) {
+                        return;
+                    }
+
+                    if(previousSessionId || !sessionId) {
+                        window.location.reload();
+                        return;
+                    }
+
+                    location.assign('/')
+                });
+            },
+            randomUUID() {
+                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+                    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                    return v.toString(16);
+                });
+            }
+        };
+
+        abp.authenticationSessionStateValidator.init();
+        
+    })();
+</script>