Angular应用中MSAL v2登录出现interaction_in_progress问题求助

问题现象 #

首次登录时触发MSAL的interaction_in_progress错误，刷新页面后问题消失，但用户每次登出再登录时都会重复出现该错误。

环境与依赖 #

使用@azure/msal-angular 2.5.0版本，未直接调用acquireToken或handleRedirect方法，依赖MsalInterceptor和MsalRedirectComponent实现认证逻辑。

日志截图 #

错误日志截图 #

刷新后日志截图 #

相关代码实现 #

app.module.ts 中的 providers 配置 #

providers: [
  StyleManagerService,
  Title,
  FeatureFlagService,
  {
    provide: MSAL_INSTANCE,
    useFactory: MSALInstanceFactory
  },
  {
    provide: MSAL_GUARD_CONFIG,
    useFactory: MsalGuardConfigFactory
  },

  {
    provide: HTTP_INTERCEPTORS,
    useClass: MsalInterceptor,
    multi: true
  },
  {
    provide: HTTP_INTERCEPTORS,
    useClass: ClaimsInterceptor,
    multi: true
  },
  {
    provide: MSAL_INTERCEPTOR_CONFIG,
    useFactory: MsalInterceptorConfigFactory
  },
  MsalService,
  MsalBroadcastService,
  MsalGuard
],
bootstrap: [AppComponent, MsalRedirectComponent]

app.module.ts 引用的工厂函数 #

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: `${authConfig.AzureAd__FrontendId}`,
      authority: `${authConfig.AzureAd__Instance}/${authConfig.AzureAd__TenantId}`,
      redirectUri: "/auth",
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: false
    },

    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  })
}

export function MsalGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['User.Read']
    }
  }
}

export function MsalInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const myProtectedResourcesMap = new Map<string, Array<string | ProtectedResourceScopes>>();
  myProtectedResourceMap.set(`${getBaseUrl()}api/*`, [`api://${authConfig.AzureAd__ClientId}/API.Read`, `api://${authConfig.AzureAd__ClientId}/API.Write`]);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: myProtectedResourceMap
  }
}

MSAL Guard 路由配置 #

{
  path: "",
  component: HomeComponent,
  pathMatch: "full",
  data: { title: siteName },
  canActivate: [MsalGuard]
},
...

{
  path: 'auth',
  component: MsalRedirectComponent
},

app.component.ts 的 ngOnInit 方法 #

this.msalBroadcastService.inProgress$
  .pipe(filter((status: InteractionStatus) => status === InteractionStatus.None),
    takeUntil(this.unsubscribe)).subscribe(() => {
          let activeAccount: AccountInfo = this.msalService.instance.getActiveAccount();
    });

已尝试的解决方案 #

• 升级@azure/msal-angular至最新版本
• 查阅同类问题案例，但现有案例未使用MsalRedirectComponent、MsalInterceptor或内容已过时，无法解决当前问题

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