Angular页面URL含code和state参数时导航栏消失原因咨询

我正在开发一个Angular网站，当URL携带特定参数组合时出现异常，具体测试案例如下：

• ?code=sommeText -> 无异常
• ?state=sommeText -> 无异常
• ?session_state=sommeText -> 无异常
• ?code=sommeText&state=someText -> 导航栏消失
• ?code=sommeText&state=someText&randomParam=RansomText -> 导航栏消失
• ?code=sommeText&session_state=someText -> 无异常
• ?state=sommeText&session_state=someText -> 无异常
• ?code=sommeText&session_state=someText&randomParam=RansomText -> 无异常
• ?code=sommeText&state=someText&session_state=someText -> 导航栏消失

导航栏仅包含用户名和退出登录按钮，通过Microsoft OAuth实现登录（用户名由此填充），目前收到Microsoft返回的400错误，导致URL被填充这些参数。应用URL为localhost:{port}/item，且未处理任何URL参数。

我并非寻求解决方案，而是想了解：为何仅当code和state两个参数同时存在时会出现导航栏消失的问题？这是否是已知问题或Bug？

相关代码文件 #

package.json #

{  
  "name": "dds-fe",  
  "version": "0.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "ng serve",    
    "build": "ng build",    
    "watch": "ng build --watch --configuration development",    
    "test": "ng test"  
  },  
  "private": true,  
  "dependencies": {    
    "@angular-builders/jest": "~13.0.0",    
    "@angular/animations": "^14.2.0",    
    "@angular/cdk": "^14.1.2",    
    "@angular/common": "^14.2.0",    
    "@angular/compiler": "^14.2.0",    
    "@angular/core": "^14.2.0",    
    "@angular/forms": "^14.2.0",    
    "@angular/localize": "^14.1.2",    
    "@angular/platform-browser": "^14.2.0",    
    "@angular/platform-browser-dynamic": "^14.2.0",    
    "@angular/router": "^14.2.0",    
    "@ngrx/effects": "^14.1.0",    
    "@ngrx/router-store": "^14.1.0",    
    "@ngrx/store": "^14.1.0",    
    "@ngrx/store-devtools": "^14.1.0",    
    "@ngx-translate/core": "^14.0.0",    
    "@ngx-translate/http-loader": "^7.0.0",    
    "ajv": "^8.11.0",    
    "angular-oauth2-oidc": "^13.0.1",    
    "jwt-decode": "^3.1.2",    
    "ngx-extended-pdf-viewer": "^15.0.2",    
    "primeflex": "^3.2.1",    
    "primeicons": "^5.0.0",    
    "primeng": "^14.0.1",    
    "rxjs": "~7.5.6",    
    "shallow-render": "^14.1.0",    
    "tslib": "^2.4.0",    
    "zone.js": "~0.11.4"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "^14.2.1",    
    "@angular/cli": "~14.2.1",    
    "@angular/compiler-cli": "^14.2.0",    
    "@types/jasmine": "~4.0.0",    
    "@types/jest": "^27.0.3",    
    "jest-preset-angular": "^11.0.1",    
    "jasmine-core": "~4.4.0",    
    "karma": "~6.4.0",    
    "karma-chrome-launcher": "~3.1.0",    
    "karma-coverage": "~2.2.0",    
    "karma-jasmine": "~5.1.0",    
    "karma-jasmine-html-reporter": "~2.0.0",    
    "ts-jest": "^29.0.0",    
    "typescript": "~4.7.2"  
  }
}

app.component.html #

<app-menu-bar  
  *ngIf="user$ | async as user"  
  [username]="user.name">
</app-menu-bar>
<router-outlet></router-outlet>

注：原app-routing.module.ts内容实际为MenuBarComponent代码 #

@Component({  
  selector: 'app-menu-bar',  
  templateUrl: './menu-bar.component.html',  
  styleUrls: ['./menu-bar.component.scss']
})
export class MenuBarComponent implements OnInit {  
  @Input()
  username: string;  
  items: MenuItem[];  

  constructor(
    private readonly translateService: TranslateService, 
    private readonly router: Router,
    private readonly oauthService: OAuthService
  ) {  }  

  ngOnInit(): void {    
    this.items = [      
      {        
        label: this.translateService.instant('MENU.DASHBOARD.LABEL'),        
        icon: 'pi pi-fw pi-home',        
        command: () => this.router.navigate([ROUTE_ITEM]),      
      },      
      {        
        label: this.username,        
        icon: 'pi pi-fw pi-user',      
      },    
    ];  
  }  

  onLogoutClicked() {    
    this.oauthService.logOut();  
  }
}

app-routes.ts #

export const ROUTE_ITEM = 'item';
export const ROUTE_NOT_FOUND = 'not-found';
export const ROUTE_UNAUTHORIZED = 'unauthorized';
export const ROUTE_SERVER_ERROR = 'error';
export const ROUTE_SERVER_UNAVAILABLE = 'server-unavailable';

AppFacade (app.component.ts) #

@Injectable({  
  providedIn: 'root',
})
export class AppFacade {  
  constructor(private store: Store<State>) {  }  

  get user(): Observable<User> {    
    return this.store.select(appSelectors.user);  
  }
}

重复的app.component.html #

<app-menu-bar    
  *ngIf="user$ | async as user"    
  [username]="user.name"  
>
</app-menu-bar>
<router-outlet></router-outlet>

menu-bar.component.html（原标注为manu-bar.component.html） #

<p-menubar [model]="items" styleClass="menubar" >  
  <ng-template pTemplate="start">    
    <img src="assets/images/LOGO.png" height="40" width="132.875" class="mr-2" alt="logo">  
  </ng-template>  
  <button pButton class="p-button-text text-white" label="{{'MENU.LOGOFF' | translate}}" icon="pi pi-power-off" (click)="onLogoutClicked()">
  </button>
</p-menubar>

menu-bar.component.ts #

@Component({  
  selector: 'app-menu-bar',  
  templateUrl: './menu-bar.component.html',  
  styleUrls: ['./menu-bar.component.scss']
})
export class MenuBarComponent implements OnInit {  
  @Input()
  username: string;  
  items: MenuItem[];  

  constructor(
    private readonly translateService: TranslateService, 
    private readonly router: Router,
    private readonly oauthService: OAuthService
  ) {  }  

  ngOnInit(): void {    
    this.items = [      
      {        
        label: this.translateService.instant('MENU.DASHBOARD.LABEL'),        
        icon: 'pi pi-fw pi-home',        
        command: () => this.router.navigate([ROUTE_DDS]),      
      },      
      {        
        label: this.username,        
        icon: 'pi pi-fw pi-user',      
      },    
    ];  
  }  

  onLogoutClicked() {    
    this.oauthService.logOut();  
  }
}

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