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
    ]
  }
];

詳細信息在這里