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/page。从那时起，我能够毫无问题地重定向到所有页面。

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

我还观察到一个控制台问题 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
    ]
  }
];

完整详情here

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

msal angular - continuous reloading while authentication using MsalGuard on routing

oauth

azure

msal

angular

msal-angular