AcquireToken redirecting to the login page again in adal-angular4

Question

I have been using handleWindowCallback() method in my login page because when I logged the login page checks the authentication and redirected to the dashboard page. It's working fine without any flaws.

But When I try to retrieve the data using acquireToken again the application is redirecting to the login page, this happens only for the first time. This cause the delay in content rendering.

LoginComponent.ts

ngOnInit() {
    this.webService.handleWindowCallback();
    console.log(this.webService.authenticate);
    if (this.webService.authenticate) {
      console.log('Redirecting to dashboard');
      this.router.navigate(['/', 'dashboard']);
    }
    console.log('login loaded');
  }

dashboardComponent.ts

ngOnInit() {
    this.showLoader = true;
    this.webService.getUser();
    this.getdata();
    console.log('content loaded');
  }

getdata() {
    const listname = 'Tenets';
    const queryParams = '?$filter=Title eq \'Dashboard\'&$select=Title,Description,Small_x0020_Text,Large_x0020_Text';
    this.webService.getdata(listname, queryParams).subscribe(data => {
      // debugger;
      console.log(data);
      console.log('content loading');
      Object.keys(data['value']).forEach(ele => {
        this.dashboardItems.push({
          'link': data['value'][ele]['Description'],
          'smallText': data['value'][ele]['Small_x0020_Text'],
          'largeText': data['value'][ele]['Large_x0020_Text']
        });
      });
    });
  }

Webservice.ts

getdata(listname, queryParams): Observable<any> {
    const url = environment.config.spUrl + environment.config.spSiteCollection
      + '_api/web/lists/getByTitle(\'' + listname + '\')/items' + queryParams;
    return this.adalService.acquireToken(environment.config.spUrl).flatMap(
      token => {
        const headersParam = new HttpHeaders({
          'Content-Type': 'application/json;odata=verbose',
          'Authorization': 'Bearer ' + token.toString()
        });
        return this.http.get(url, { headers: headersParam });
      });
  }

I need to retrieve the data, during ngOnInit() getdata() which should load once and it will render the content without redirecting to the loginComponent again.

Please help to solve this. It's already ate my 2 days.

Answer 1

There are some known workarounds for this issue. You can redirect the user back to the redirect URI rather than the loginStartPage by populating the loginStartPage from adal.config.redurectURI.

You can also handle the navigation in your callback component to set the token and user info of ADAL.

handleCallback(hash: string) {
    if (!this.context.isCallback(hash))
        return;

    var requestInfo = this.context.getRequestInfo(hash);
    if (requestInfo.valid)
        this.context.saveTokenFromHash(requestInfo); //Save the token and user information.  
}

The user can be retrieved with the context.getCachedUser() function in the callback component which then navigates to the desired page.

The callback code:

  this.adalService.handleCallback(window.location.hash);
if (this.adalService.userInfo)
    this.router.navigate(['dashboard']); //Navigate to user dashboard
else
    this.router.navigate(['']); //Navigate to home page.

Please refer to this similar thread and see if it helps resolve your issue.