angular - msal 和 angular 4 重定向 Url

Question

我正在使用 msal.js 对用户进行身份验证。我正在成功获得 token 。在 Azure 门户的 redirectURl 中，我将路径指定为“http://localhost:44340”。

我的 app.routing 模块如下所示:

 const routes: Routes = [
  { path: 'authentication', component: LoginComponent },
  { path: '', redirectTo: '/lists', pathMatch: 'full' , canActivate: [AuthenticationGuard] },
  { path: 'lists', component: ApplicationContainer ,  canActivate: [AuthenticationGuard]}
];

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

我的问题是当用户登录时我确实获得了 token ，当 redirecturi 到达“/lists”时。我有一个守卫。在守卫内部， token 值尚未设置，因为页面尚未重定向。这就是为什么它一直给出 false 并且我被重定向回登录页面的原因。

Answer 1

这可能与哈希片段有关。

虽然不是 Angular 4，但就我而言(旧的 Angular JS - 1.6 应用程序)我不得不更改 $locationProvider 并将散列设置为空字符串，因为 # 片段干扰了 Azure B2C AD 返回的 #id_token。

如果使用 Angular JS，请确保您使用的是 msal-angularjs 包。

https://www.npmjs.com/package/@azure/msal-angularjs

那里有一个注释:

Note: When HTML5 mode is not configured, ensure the $locationProvider hashPrefix is set to an empty string

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(false).hashPrefix('');
}]);

Without the above setting, AAD login will loop indefinitely as the callback URL from AAD (in the form of, {yourBaseUrl}/#{AADTokenAndState}) will be rewritten to remove the '#' causing the token parsing to fail and login sequence to occur again.