Angular SPA登出后无法正常导航至登录页问题排查

问题现象 #

用户成功登出后，浏览器地址栏显示https://domain.tld/login，但router-outlet区域为空，仅在页面刷新后登录页才正常显示。

路由配置 #

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    data: {
      reuse: false
    }
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      reuse: false
    }
  }
];

AuthService核心代码 #

export class AuthService {
    private currentUserSubject: BehaviorSubject<LoginStatus>;
    public currentUser$: Observable<LoginStatus>;

    constructor(private readonly http: HttpClient, private readonly router: Router) {
        this.currentUserSubject = new BehaviorSubject<LoginStatus>(
            JSON.parse(localStorage.getItem('currentUser'))
        );
        this.currentUser$ = this.currentUserSubject.asObservable();
    }

    public get currentUserValue(): LoginStatus {
        return this.currentUserSubject.value;
    }

    login(loginUser: LoginUserDto): Observable<LoginStatus> {
        return this.http.post<LoginStatus>(`${environment.serviceHost}/login`, loginUser, httpOptions)
            .pipe(map(loginStatus => {
                localStorage.setItem('currentUser', JSON.stringify(loginStatus));
                this.currentUserSubject.next(loginStatus);
                return loginStatus;
            }));
    }

    unassignCurrentUser(): void {
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
    }

    logout(): void {
        this.unassignCurrentUser();
        this.router.navigate(['/login']);
    }
}

关联异常信息 #

登录时频繁出现DOM操作错误：

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node...at OffscreenFragmentComponent.ngOnDestroy (fullcalendar-angular.mjs:111:30)

清除缓存并刷新页面后，该错误消失，此时登出可正常跳转至登录页。

解决方案 #

1. 修复FullCalendar的DOM销毁异常 #

该错误是FullCalendar Angular组件在ngOnDestroy时尝试移除不存在的DOM节点导致的，会中断Angular路由切换生命周期，进而阻碍登录页渲染。可通过以下方式处理：

• 延迟路由跳转：给组件销毁留出缓冲时间，避免DOM错误干扰路由切换：

  logout(): void {
      this.unassignCurrentUser();
      setTimeout(() => {
          this.router.navigate(['/login']);
      }, 100);
  }
  

• 手动销毁日历实例：在包含FullCalendar的组件中，提前销毁实例规避DOM冲突：

  import { Component, ViewChild, OnDestroy } from '@angular/core';
  import { FullCalendarComponent } from '@fullcalendar/angular';
  
  @Component({...})
  export class CalendarComponent implements OnDestroy {
      @ViewChild(FullCalendarComponent) calendarComponent: FullCalendarComponent;
  
      ngOnDestroy(): void {
          if (this.calendarComponent?.getApi()) {
              this.calendarComponent.getApi().destroy();
          }
      }
  }
  

2. 简化路由配置（可选） #

当前路由中''和'login'重复指向LoginComponent，可简化配置避免潜在复用问题：

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent,
    data: { reuse: false }
  }
];

3. 强制路由刷新 #

若路由复用机制仍有异常，可在登出时强制触发路由重载：

logout(): void {
    this.unassignCurrentUser();
    this.router.navigate(['/login'], { replaceUrl: true })
      .then(() => {
          this.router.routeReuseStrategy.shouldReuseRoute = () => false;
          this.router.onSameUrlNavigation = 'reload';
          this.router.navigate(['/login']);
      });
}

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