msal angular - 在路由上使用 MsalGuard 进行身份验证时持续重新加载

Question

我正在尝试在我的 angular 应用程序中实施msal-v1以验证我的企业应用程序。

我的应用程序中有几条路线如下

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [MsalGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [MsalGuard] },
  { path: 'search', component: SearchComponent, canActivate: [MsalGuard] }
];

我的 MSAL 配置如下所示

MsalModule.forRoot(
      {
        auth: {
          clientId: environment.clientId,
          authority: "https://login.microsoftonline.com/tenant.onmicrosoft.com/",
          validateAuthority: true,
          redirectUri: "https://example.com/",
          postLogoutRedirectUri:
            "https://example.com/",
          navigateToLoginRequestUrl: true,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
        system: {
          logger: new Logger(loggerCallback, {
            level: LogLevel.Verbose,
            piiLoggingEnabled: true,
          }),
        }
      },
      {
        popUp: false,
        consentScopes: ["user.read", "openid", "profile"],
        unprotectedResources: ["https://www.microsoft.com/en-us/"],
        protectedResourceMap,
        extraQueryParameters: {},
      }
    )  

我在这里面临的问题是，当我尝试使用empty route运行域时，身份验证工作正常，然后重定向到home Component /页面。 从那时起，我能够毫无问题地重定向到所有页面。

但是当我试图直接打开Profile/Search路由时，在授权调用之后，url 通过首先重定向到https://example.com/#id_token=eyJ0eXAiOi..进入loop 。 然后到https://example.com/search#id_token=eyJ0eXAiOi.. 然后输入https://example.com/#id_token=eyJ0eXAiOi..。 再次等等。

我还观察到一个控制台问题，上面写着clientautherror: login_in_progress: error during login call - login is already in progress.

任何人都可以让我知道我可能做错了什么吗？

Answer 1

我在 github 论坛中讨论了相同的问题，并通过设置一条没有MsalGuard但指向相同HomeComponent的新路由找到了替代解决方案。

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [
      MsalGuard
    ]
  },
  {
    path: 'auth-redirect',
    component: HomeComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [
      MsalGuard
    ]
  }
];

详细信息在这里