Adal js库-首次登录时，this.adalService.acquireToken方法提供“令牌更新操作由于超时而失败”

Question

尽管有一些与此问题相关的链接，但我没有找到任何相关的答案，所以希望这次有人能够回答。

这里是场景，在我的Angular应用程序中，我使用的是 adal-angular4 ，它是对 Adal.js

的包装

问题：仅在首次登录时使用 this.adalService.acquireToken 方法。我收到超时错误，但是登录后如果我要刷新页面，则 this.adalService.acquireToken 方法可以正常工作，有趣的部分在后面。

1. 问题仅出现在部署的环境中，不在本地主机中。
2. 错误“令牌更新操作由于超时而失败” 仅在网络速度较慢或随机时间有时出现。

这是我的请求拦截器服务

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> | Observable<HttpSentEvent | HttpHeaderResponse
| HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
if (req && req.params instanceof CustomAuthParams && req.params.AuthNotRequired) {
  return this.handleAuthentication(req, next, null);
} else {
  if (!this.adalService.userInfo.authenticated) {
    console.log(req, 'Cannot send request to registered endpoint if the user is not authenticated.');
  }
  var cachedToken = this.adalService.getCachedToken(environment.authSettings.clientId);
  console.log('cachedToken', cachedToken);
  if (cachedToken) {
    return this.adalService.acquireToken(resourceURL).timeout(this.API_TIMEOUT).pipe(
      mergeMap((token: string) => {
        return this.handleAuthentication(req, next, token);
      })
    ).catch(err => { console.log('acquire token error', err); return throwError(err) })
  } else {
    this.adalService.login();
  }
}

}

Answer 1

好吧，在奋斗1至2天后，我找到了根本原因。因此发布此答案，以便对其他人有帮助。

adal-angular4 库使用的是 adal-angular 的 1.0.15 版本，该版本是 loadFrameTimeout的默认超时时间的旧版本是 6秒，在此版本中，没有用于增加 loadFrameTimeout 的配置。请参见下面的链接

Adal configurations

现在，在第一次登录时，会发生很多步骤。

1. 经过身份验证后，应用程序通过在回复URL中附加 ID和访问令牌，通过azure AD重定向到配置的URI。
2. 然后库会根据配置在本地存储或会话存储中设置所有这些令牌。
3. 然后，您的应用程序将加载并开始调用webapi。现在这里发生了有趣的事情，对于每个请求，我都会针对Webapi应用程序调用 acquireToken 方法，因此，如果网络运行缓慢， acquireToken 调用将给出超时错误，因为有时6秒是不够的。但是对于某些API，它将能够获取令牌。
4. 现在第一次调用acquireToken方法会花费时间，但是对于后续请求，它会从缓存中获取令牌，因此超时错误只会在第一次出现之后出现。

因此，目前在此库中无法增加 loadFrameTimeout ，因此我使用了 Angular5 warpper使用的是 adal-angular 的 1.0.17 版本，我们可以增加 loadFrameTimeout 来解决我的问题。