angular - 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: {},
      }
    )  

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

但是，当我尝试直接打开个人资料/搜索 路由时，在授权调用之后，网址将首先重定向到 https://example.com/#id_token=eyJ0eXAiOi.. 从而进入循环 。然后到https://example.com/search#id_token=eyJ0eXAiOi.. 。然后输入https://example.com/#id_token=eyJ0eXAiOi.. 。一遍又一遍，依此类推。

我还观察到一个控制台问题，显示clientautherror:login_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
    ]
  }
];

完整详细信息here