Angular 13中if条件判断仅触发单分支的问题排查

问题场景相关截图 #

问题对应实现代码 #

case Role.PARENT: { 
    if (this.user.profile == null) { 
        this.router.navigate([`/profil-parent`]); 
        console.log('here into profil parent'); 
    } else { 
        this.router.navigate([`/dashboard`]); 
        console.log('here into dashboard'); 
    } 
    break; 
} 
case Role.ENSEIGNANT: { 
    break; 
} 

问题根因 #

这个问题90%以上是以下三个原因导致的：

• 异步数据时序问题：this.user的信息是从接口、本地存储异步加载的，路由判断逻辑执行的时候，profile字段还没拿到最新值，等跳转完成之后数据才加载完成，判断逻辑不会自动重跑，就会出现永远只进一个分支的情况。最典型的场景就是页面初始化阶段直接拿user对象做判断，这时候接口请求还没返回，user对象要么是初始默认值，要么是旧的缓存值，和实际状态不一致。
• 判断条件覆盖不全：你用== null做判断，只能覆盖null和undefined两种空值，如果后端返回的空profile是空对象{}、空字符串''这类假值，判断会误判为“存在profile”，直接跳去dashboard；反过来如果profile字段被异常赋值成非null的假值，也会走错分支。另外console.log打印引用类型对象时会取最终内存值，你看到的打印结果不一定是判断执行瞬间的真实值，很容易误导排查方向。
• 跳转逻辑被覆盖：项目里如果存在全局路由守卫、其他初始化钩子中的路由跳转逻辑，会覆盖你当前分支里写的跳转动作，哪怕控制台打印了对应分支的log，最终路由地址也会被后面的逻辑改掉，看起来就像分支判断没生效。

修复方案 #

• 把路由判断逻辑挪到用户信息加载完成的回调里执行，不要在初始化阶段直接读同步值判断。如果用RxJS存用户状态，加过滤条件等拿到有效用户信息后再执行判断：

this.userService.currentUser$.pipe(
  filter(user => !!user), // 等待用户信息加载完成
  take(1) // 取完最新值自动取消订阅，避免内存泄漏
).subscribe(currentUser => {
  switch(currentUser.role) {
    case Role.PARENT: {
      // 补全空值判断逻辑，覆盖空对象场景
      const isProfileCompleted = !!(currentUser.profile && Object.keys(currentUser.profile).length);
      const targetPath = isProfileCompleted ? '/dashboard' : '/profil-parent';
      this.router.navigate([targetPath]);
      break;
    }
    case Role.ENSEIGNANT: {
      // 补全教师角色对应路由逻辑
      break;
    }
  }
})

• 全局排查路由守卫、app初始化、登录回调等位置的路由跳转代码，删掉和当前角色路由逻辑冲突的硬编码跳转，避免跳转结果被覆盖。
• 调试时在判断分支打行断点，查看执行瞬间this.user.profile的实际值和类型，不要依赖console.log的打印结果判断变量状态。

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