Angular前端未保存更改跳转时仅显示Home问题的修复咨询

这个问题本质是登出状态残留、路由守卫逻辑缺陷共同导致的跳转目标丢失问题，可按以下优先级排查修复：

1 修复登出逻辑的状态与缓存清理 #

登出操作未完整清空上一次会话的路由缓存和状态标记，首次登录后路由守卫读取到旧的登出状态，触发默认重定向到Home的逻辑。

• 登出方法中补充路由配置重置、缓存清理逻辑，清除上一次会话的路由快照残留
• 登录态校验不要用service中的缓存变量，每次都从localStorage/sessionStorage实时读取最新值

// 登出方法补充逻辑
logout() {
  this.authService.clearAuthInfo();
  localStorage.removeItem('routeCache');
  sessionStorage.clear();
  this.router.resetConfig(); // 重置路由配置清除旧快照
  this.router.navigate(['/login']);
}

2 修正未保存变更守卫的跳转逻辑 #

高频问题点：当前CanDeactivate路由守卫的弹窗确认回调中，硬编码了跳转逻辑或者未捕获原始跳转目标，首次登录缓存为空时就默认落到Home页。

• 守卫中直接捕获用户触发的原始跳转目标nextState.url，确认离开时返回对应的UrlTree即可，完全交由Angular原生路由接管跳转
• 不要在弹窗回调中手动调用router.navigate，会打断原生路由流导致目标丢失

canDeactivate(
  component: DeviceEditComponent,
  currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState: RouterStateSnapshot
): Observable<boolean | UrlTree> {
  if (component.hasUnsavedChanges()) {
    return this.confirmService.open('未保存更改确认离开').pipe(
      map(confirmed => confirmed ? this.router.parseUrl(nextState.url) : false)
    );
  }
  return true;
}

3 修复标签页路由匹配逻辑 #

如果是自定义实现的标签页组件，要排查跳转逻辑是否存在路由未注册就触发跳转的问题：

• 标签跳转统一用router.navigateByUrl()传入完整路径，不要用相对路径跳转
• 把业务路由注册逻辑移到APP_INITIALIZER阶段，保证登录后所有路由完成注册再渲染页头、标签页等导航组件

4 验证步骤 #

修复完成后按以下路径复现验证：

1. 登录应用进入设备编辑页，修改内容后触发未保存变更弹窗，确认跳转其他标签页，验证目标页加载正常
2. 登出应用后重新登录，重复第一步操作，确认不会回退到Home页
3. 多次切换登出、登录状态，验证无偶现跳转异常

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