为什么在 URL 中传递查询参数时 Angular 不加载任何内容？

Question

我有一个 angular 应用程序与 Microsoft 单点登录库 azure/msal-browser 和 azure/msal-angular

集成

my app-routing.module.ts 如下所示：

  {
    path:'clients',
    component: ClientSearchComponent,
    data: { title: 'Client Search' },
    canActivate: [MsalGuard]
  },
  {
    path: 'clients/:id',
    component: ClientDetailsComponent,
    resolve: {
      tab: ClientDetailsResolver,
      headerData: ClientDetailHeaderDataResolver
    },
    canActivate: [MsalGuard],
    children: [
      {
        path: 'demographics',
        component: ClientIdentInfoComponent,
        data: { title: 'Client Demographics' },
        resolve: { client: ClientIdentInfoResolver },
        canDeactivate: [ ClientIdentInfoGuard ],

      },
      {
        path: 'insurances',
        component: ClientInsuranceComponent,
        data: { title: 'Client Insurances' },
        resolve: { insurances: InsuranceInfoResolver },
      },
      {
        path: '',
        redirectTo: 'demographics',
        pathMatch: 'full'
      }
  }

我有一个外部服务，用户点击一个按钮并被重定向到另一个页面（不是新标签）。在他们输入用户名并点击提交后，该服务会使用以下 url:

将他们重定向到我的应用程序

mydomain.com/clients?code=zcwZmVmMDJkYjJmZmQtOGIz_PF84_0be990f3-c9a9-483d-b0ca-f87b327c76b3&state=7f1934f6-4te0-4687-ac81-47316c60efe5

出于某种原因，我的应用程序没有显示任何内容，甚至 app.component.ts 级别的 console.log('whatever') 也没有显示。

ngOnInit() {
    console.log('whatever'); // Not reachable

    const currentPath = this.location.path();
    // Dont perform nav if in iframe or popup, other than for front-channel logout
    this.isIframe = BrowserUtils.isInIframe() && !window.opener && currentPath.indexOf("logout") < 0; // Remove this line to use Angular Universal
    this.setLoginDisplay();

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        this.setLoginDisplay();
        this.checkAndSetActiveAccount();
      })
  }

如果我将查询参数 code 更改为字面上的 ANTYHING 那么应用程序就可以正常工作并显示页面。不幸的是，我无法从第三方应用程序控制参数名称 code。如果我的应用程序在 url.

中传递了查询参数 code，那么它似乎有问题

IPublicClientApplication 记录器显示我的应用程序正在进入无限循环

Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Event callback registered with id: f39e816c-5bc5-4fa5-8629-c440356cfdf5
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - canActivate
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - MSAL Guard activated
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Info - Emitting event: msal:handleRedirectStart
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Emitting event to callback f39e816c-5bc5-4fa5-8629-c440356cfdf5: msal:handleRedirectStart
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise has been called for the first time, storing the promise
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Info - handleRedirectPromise called but there is no interaction in progress, returning null.
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Info - Emitting event: msal:handleRedirectEnd
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Emitting event to callback f39e816c-5bc5-4fa5-8629-c440356cfdf5: msal:handleRedirectEnd
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - BroadcastService - msal:handleRedirectEnd results in setting inProgress to none
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - at least 1 account exists, can activate or load
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Info - Guard - Hash contains known code response, stopping navigation.
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - canActivate
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - MSAL Guard activated
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Info - Emitting event: msal:handleRedirectStart
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Emitting event to callback f39e816c-5bc5-4fa5-8629-c440356cfdf5: msal:handleRedirectStart
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise has been called previously, returning the result from the first call
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - at least 1 account exists, can activate or load
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Info - Guard - Hash contains known code response, stopping navigation.
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - canActivate
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - MSAL Guard activated

我正在使用弹出窗口而不是为身份验证重定向

我的app.module.ts看起来像这样

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log('Message:::::' + message);
  console.log('Log Level:::::' + logLevel);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '<clientId>',
      authority: 'https://login.microsoftonline.com/<tid>',
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11. Remove this line to use Angular Universal
    },
    system: {
      allowRedirectInIframe: true,
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Verbose,
        piiLoggingEnabled: true
      }
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  const baseUrl = environment.apiUrl;
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
  protectedResourceMap.set(baseUrl, ['<clientId>/.default']);

  return {
    interactionType: InteractionType.Popup,
    protectedResourceMap
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: ['clientId/.default']
    },
    loginFailedRoute: '/unauthorized'
  };
}

providers 数组如下所示

providers: [
    CdkColumnDef,
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]

你们以前遇到过这个问题吗？

Answer 1

我看到你在使用 MSAL，你可以将记录器设置为显示更多详细信息，看看是否是拦截器导致了问题：

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log(message);
}

export function MSALInstanceFactory(): IPublicClientApplication {

  return new PublicClientApplication({
    auth: {...your auth parms...},
    cache: {... your cache parms ...},
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Debug,
        piiLoggingEnabled: true
      }
    }
  });
}

这让我们更深入地了解导致路由问题的原因。

为什么在 URL 中传递查询参数时 Angular 不加载任何内容？

Why Angular is not loading anything when query param is passed in the URL?

angular