重定向URI上的MSAL - MsalGuard -进入重定向循环

Question

我正在我的角度应用程序中实现msal，我正在使用msal-v1库。

我从文档样本中提取了angular-7示例，并尝试在我的企业应用程序中实现以下代码。

我在popup as false中添加了app.module.ts

MsalModule.forRoot(
      {
        auth: {
          clientId: "app client id",
          authority:
            "https://login.microsoftonline.com/tenant.onmicrosoft.com/",
          validateAuthority: true,
          redirectUri: window.location.origin,
          postLogoutRedirectUri:
            window.location.origin,
          navigateToLoginRequestUrl: true,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
      },
      {
        popUp: false,
        consentScopes: ["user.read", "openid", "profile"],
        unprotectedResources: ["https://www.microsoft.com/en-us/"],
        protectedResourceMap,
        extraQueryParameters: {},
      }
    )

在app-routing.module.ts上，我添加了MsalGuard on the empty route，因为我的应用程序没有任何登录按钮，默认的登陆页面也需要认证。

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

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

通过这样做，如果我直接访问域URL(即没有任何路由的重定向URI)，我就能够在本地存储中正确地授权和获取令牌，但是如果我们清除本地存储，然后直接导航到profile路径，我就无法获得令牌，因为它正在进入一个连续的redirect loop。

应用程序重定向到/#id_token=eyJ，然后重定向到/profile/#id_token=eyJ，等等。

请指导我如何保护所有的路线在我的角度应用，而不是进入重定向循环。

msal version - 1.4.4
msal-angular - 1.1.2

Answer 1

我在github(msal-v1)论坛上讨论了同样的问题，并找到了另一种解决方案，方法是在没有MsalGuard的情况下设置一条新的路径，但设置到同一个HomeComponent上。

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

详细讨论了这里