Angular 6中基于MsAdal实现多标签页同步登出的问题咨询

Hey there, I’ve dealt with this exact multi-tab logout sync issue using MsAdalAngular6Service in Angular 6 before—it’s definitely a gotcha since the library doesn’t handle cross-tab state out of the box. Let me share the fixes that worked for me:

1. Ensure Shared Storage First #

First, double-check your Adal configuration to make sure it’s using localStorage (not sessionStorage) for caching. Session storage is isolated per tab, so switching to local storage lets all tabs share the auth state:

// In your AppModule
import { MsAdalAngular6Module } from 'microsoft-adal-angular6';

@NgModule({
  imports: [
    MsAdalAngular6Module.forRoot({
      tenant: 'your-tenant-id',
      clientId: 'your-client-id',
      redirectUri: window.location.origin,
      cacheLocation: 'localStorage', // Critical for cross-tab state sharing
    })
  ]
})
export class AppModule { }

2. Listen for Storage Changes Across Tabs #

When one tab triggers a logout, Adal clears auth-related items from localStorage. We can listen for these changes in other tabs and trigger a logout there too. Add this logic to your root component (like AppComponent):

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  private storageListener: (event: StorageEvent) => void;

  constructor(
    private msAdal: MsAdalAngular6Service,
    private router: Router
  ) {}

  ngOnInit() {
    // Set up storage event listener
    this.storageListener = this.handleStorageChange.bind(this);
    window.addEventListener('storage', this.storageListener);
  }

  private handleStorageChange(event: StorageEvent) {
    // Check if Adal-related keys were cleared (indicates logout)
    if (event.key?.startsWith('adal.') && event.newValue === null) {
      // If the current tab is still authenticated, trigger logout
      if (this.msAdal.userInfo.authenticated) {
        this.msAdal.logout();
        this.router.navigate(['/login']);
      }
    }
  }

  ngOnDestroy() {
    // Clean up listener to avoid memory leaks
    window.removeEventListener('storage', this.storageListener);
  }
}

3. Optional: Add a Custom Logout Trigger #

If you want more control, you can add a custom logout method that explicitly signals other tabs to log out. This avoids relying solely on Adal’s storage cleanup:

// In your auth service or component
customLogout() {
  // Set a trigger flag in localStorage
  localStorage.setItem('adal_logout_trigger', Date.now().toString());
  // Execute Adal's standard logout
  this.msAdal.logout();
}

// Update the storage listener to handle this trigger
private handleStorageChange(event: StorageEvent) {
  if (event.key === 'adal_logout_trigger') {
    localStorage.removeItem('adal_logout_trigger'); // Clean up the flag
    if (this.msAdal.userInfo.authenticated) {
      this.msAdal.logout();
      this.router.navigate(['/login']);
    }
  }
  // Keep the original Adal key check from step 2 too!
  else if (event.key?.startsWith('adal.') && event.newValue === null) {
    if (this.msAdal.userInfo.authenticated) {
      this.msAdal.logout();
      this.router.navigate(['/login']);
    }
  }
}

Combining these steps ensures that when a user logs out from one tab, all other open tabs will detect the state change and automatically log out too.

内容的提问来源于stack exchange，提问作者Santosh Shiva Kumar