返回令牌之前的AcquireToken可观察错误

Question

我正在使用adal-angular4库在angular 4单页应用程序中进行隐式流实现。这个应用程序调用一个web api来显示结果。这两个应用程序都托管在azure中（在一个特定的租户中），并进行了适当的注册，配置工作正常。

1. AuthenticationGuard.ts 
从“@Angular/Core”导入{Injectable}；
从'rxjs/Observable'导入{Observable}；
从“@Angular/Router”导入{Router,CanActivate,CanActivateChild,ActivatedRouteSnapshot,RouterStateSnapshot,NavigationExtras}；
从“ADAL-Angular4”导入{AdalService}；
@injectable()
导出类AuthenticationGuard实现CanActivate、CanActivateChild{
constructor(
    private router: Router,
    private adalSvc: AdalService
) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.adalSvc.userInfo.authenticated) {
        return true;
    } else {
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return false;
    }
}

canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(childRoute, state);
}}
AppComponent.ts
@component（{selector:'app-root',templateurl:'./app.component.html',styleurls:['./app.component.css']}）导出类AppComponent实现OnInit{title='My Portal‘；isLoggedIn=false；LoggedInUser：String；private BodyTag：Any；构造函数（private AdalService：AdalService,private Router：Router）{This.AdalService.Init（Environment.AzureConfig）；This.BodyTag
ngOnInit（）{console.log（“AppComponent Init”）；This.AdalService.HandleWindowCallback（）；if（This.AdalService.UserInfo.Authenticated）{This.IsLoggedIn=This.AdalService.UserInfo.Authenticated；This.LoggedInUser=This.AdalService.UserInfo.Profile.Name；}Document.AddEventListener（“KeyDown”,（）=>This.HandleEvt）；}
logout（）：void{this.adalService.logout（）；}}
LoginComponent.ts
从“@Angular/Core”导入{Component,OnInit,Injectable,Inject}；从“@Angular/Router”导入{ActivatedRoute,Router}；从“ADAL-Angular4”导入{AdalService}；从“../app.constants”导入{APP_CONFIG,AppConfig}；
@component（{selector：“app-login”,templateurl：“./login.component.html”,styleurls：[“./login.component.css”]}）导出类LoginComponent实现OnInit{
isLoggedIn=false；LoggedInUser：字符串；LocallogGedInUser：any；TokenNew：字符串；
构造函数（private Route：ActivatedRoute,private Router：Router,private AdalService：AdalService,@Inject(APP_CONFIG)private AppConfig：AppConfig）{}
ngOnInit（）{This.AdalService.HandleWindowCallback（）；if（This.AdalService.UserInfo.Authenticated）{This.IsLoggedIn=This.AdalService.UserInfo.Authenticated；This.LoggedInUser=This.AdalService.UserInfo.Profile.Name；}}
login（）：void{const returnUrl=this.route.snapshot.queryparams[“return url”]“/”；if（this.adalservice.userinfo.authenticated）{this.router.navigate([returnUrl])；}else{this.adalservice.login（）；}}}
ts（负责通过getAll（）方法进行第一个API调用。
从“@Angular/Core”导入{Injectable,OnInit,Inject}；从“@Angular/Http”导入{Headers,Http,Response,RequestOptions}；从“@Angular/common/http”导入{HttpClient,HttpHeaders}；从'rxjs/Observable'导入{Observable}；导入“../rxjs-extensions”；从“../app.constants”导入{APP_CONFIG,AppConfig}；@injectable()导出类ProductService实现OnInit{headers：Headers；TokenNew：String；Items：Products[]；LoggedInUserName：String；LoggedInUserEmail：String；baseUrl=“https：//MyProductsAPI/”；productListEndpoint=This.baseUrl+“/Products”；构造函数（私有Http：HttpClient,私有HttpBase：Http,@inject(APP_CONFIG)私有AppConfig：AppConfig,私有AdalService：AdalService）
public getAllProducts（）：observable>{return this.httpbase.get（this.ProductListEndpoint,this.getRequestOptionsWithHeadersForHTTP（））.map（response=>{const tmp=response.json（）；return tmp；}）；}
私有getRequestOptionsWithHeadersForHTTP（）：RequestOptions{
This.ActemtacQuireToken（）；
This.TokenNew=This.AdalService.GetCachedToken（This.AppConfig.ResourceApplicationID）；
const headersNew=新标头（{“content-type”：“application/json”}）；
HeadersNew.Append('Authorization','Bearer'+This.TokenNew)；
const options=new RequestOptions（）；
Options.Headers=HeadersNew；
在调用API之前，我如何确保令牌存在-就目前情况而言，为检索product list而进行的方法调用的顺序如下所示
>
调用getAllProducts（）--这是负责调用API的主要方法。这将启动对其他方法的嵌套调用。
getAllProducts（）调用getRequestOptionsWithHeadersForHTTP（）以获取与http请求相关联的RequestOptions（头），然后将请求触发到apiendpoint。
getRequestOptionsWithHeadersForHTTP（）调用AttpacQuireToken（）从adal服务获取令牌。
尝试acquiretoken（）调用acquiretoken（）-该方法首先检查是否存在缓存的令牌，如果没有，则调用acquiretoken来检索一个。在这里，调用直接执行“error”lambda中的代码块，从而在UI中引发错误。几秒钟后，当acquiretoken重新创建令牌时，它执行“token”lambda中的代码。
这只在用户第一次登录并且缓存中没有令牌时发生。对于后续的尝试，这工作很好（检索缓存的令牌）。
                

Answer 1

您可以像这样使用Promise或chain observable：

private attemptAcquireToken():Observable<boolean> {
    this.tokenNew = this.adalService.getCachedToken(this.appConfig.resourceApplicationId);
    console.log('1. token from attemptacquiretoken ' + this.tokenNew);
    // this.tokenNew = null;
    if (this.tokenNew == null) {
        console.log('2. token new is null - trying to acquiretoken using adal');
        this.adalService.acquireToken(this.appConfig.resourceApplicationId).subscribe(
          token => {
            ...
            return Observable.of(true);
          }, // never comes
          error => {
            ....
            return Observable.of(false);
    }  
}

private getRequestOptionsWithHeadersForHTTP(): Observable<RequestOptions> {
    this.attemptAcquireToken().subsribe(r => {
    if (r !== false) {
            ...
            options.headers = headersNew;
            return Observable.of(options);
        } else {
            return Observable.of(undefined);
        }
    });
}

等等...