angular - adal angular 应用程序重新加载 - 按设计？

Question

我构建了一个简单的 Angular 应用程序，为了进行身份验证，我使用 npm 包 adal-angular4

对 AzureAD 进行身份验证

当身份验证发生时，用户被发送到 https://login.microsoftonline.com 他们登录并被发送回 agulare 应用程序，这会导致重新加载/重新编译，这将导致加载时间延迟，只是短暂但整体加载时间体验翻倍。

如你所见:

• 登录已加载(本地主机)
• 应用已编译
• 用户被带到登录屏幕 (azuread)
• 用户登录，用户被带回登录(本地主机)
• 应用符合要求

main.bundle.js 和 background' 之间的负载差距是显示编译时间的一种简单方式，它只是一个非常时间，但我有一个非常快电脑。

如何避免重新编译？我的想法是

• 在 index.html 中完成所有身份验证(例如，首次加载 APP 之前)并将 JWT token 保存到 session 存储中
• 找到一个 Angular 包通过 IFRAME 执行此操作

有人对此有任何想法吗？也许 adal-angular4 应该使用 IFRAME？

更多细节

Example adal-angular4

的

Microsoft anglurejs example使用这个 javascrit也许这是从 index.html 执行的纯 JavaScript 解决方案的良好起点。

Answer 1

您需要直接使用 adal.js，而不是通过 Angular 应用程序。

在主index.html中添加如下代码

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
<script>
window.config = {
  instance: 'https://login.microsoftonline.com/',
  tenant: 'yourtenant.co.uk',
  clientId: '11111111-1111-1111-1111-1111111111',
  postLogoutRedirectUri: window.location.origin,
  cacheLocation: 'localStorage',
};
// Check For & Handle Redirect From AAD After Login
var authContext = new AuthenticationContext(config);
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
    window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}
var user = authContext.getCachedUser();
if (!user) {
  authContext.login();
}
</script>

index.html 仍然可以加载 Angular 应用程序的所有 javascript，上面的代码将执行。

在我的 Angular 应用程序中，我使用 angular2-jwt，它希望 token 位于 token 中，因此我需要使用以下代码移动 token :

localStorage.setItem('token', localStorage.getItem( 'adal.access.token.key' + config.clientId));

我在应用 AppComponent 中添加了一条消息，您可以在调试控制台中看到它。

老办法，重新加载就可以看到.. 如您所见，纯 JavaScript 方式仅加载一个应用程序。