oidc-client refresh web page cause user data lost

Question

I use this oidc for accessing identityserver4 authentication. every thing works fine. After I log in, user data was lost after I hit F5 to refresh the data. Here is my auth.service.ts.

import { HttpClient , HttpHeaders} from '@angular/common/http';
import { EventEmitter, Injectable } from '@angular/core';
import { User, UserManager } from 'oidc-client';
import { Observable } from 'rxjs/Rx';

import { getUserManagerSettings } from '../utils/get-user-manager-settings-util';

@Injectable()
export class AuthService {
   mgr: UserManager = new UserManager(getUserManagerSettings());
   userLoadededEvent: EventEmitter<User> = new EventEmitter<User>();
   currentUser: User;
   loggedIn = false;
   authHeaders: Headers;
   constructor(private http: HttpClient) {

    this.mgr.getUser()
    .then((user) => {
    if (user) {
      this.loggedIn = true;
      this.currentUser = user;
      this.userLoadededEvent.emit(user);
    } else {
      this.loggedIn = false;
    }
  })
  .catch((err) => {
    this.loggedIn = false;
  });

  this.mgr.events.addUserLoaded((user) => {
    this.currentUser = user;
    this.loggedIn = !!user;
  });

  this.mgr.events.addUserUnloaded((e) => {
    this.loggedIn = false;
  });
 }

isLoggedInObs(): Observable<boolean> {
   return Observable.fromPromise(this.mgr.getUser()).map<User, boolean>
  ((user) => {
  if (user) {
    return true;
  } else {
    return false;
  }
});
}

clearState() {
 this.mgr.clearStaleState().then(function () {
}).catch(function (e) {
});
}

getUser() {
this.mgr.getUser().then((user) => {
  this.currentUser = user;
}).catch(function (err) {
});
}

removeUser() {
this.mgr.removeUser().then(() => {
}).catch(function (err) {
});
}

startSigninMainWindow() {
 this.mgr.signinRedirect({ data: 'some data' }).then(function () {
}).catch(function (err) {
});
}
endSigninMainWindow() {
this.mgr.signinRedirectCallback().then(function (user) {
}).catch(function (err) {
});
}

startSignoutMainWindow() {
 this.mgr.signoutRedirect().then(function (resp) {
  setTimeout(5000, () => {
  });
}).catch(function (err) {
});
}

endSignoutMainWindow() {
this.mgr.signoutRedirectCallback().then(function (resp) {
}).catch(function (err) {
});
}

getHeader() {
  return new HttpHeaders().set('Authorization', this.currentUser.token_type 
+ ' ' + this.currentUser.access_token);
}
}

Here is the api.service.ts file. The auth.service.ts is used by ap.service to get headers.

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   import { Observable } from 'rxjs/Observable';
   import { AuthService} from './auth.service';

   @Injectable()
    export class ApiService {

    constructor(private http: HttpClient, private authService: AuthService) 
    { }

   get(path, body?): Observable<any> {
     const options = body ? {...body, headers: this.authService.getHeader()} 
    : {headers: this.authService.getHeader()};
    return this.http.get(path, options);
   }

   post(path, body?) {
       return this.http.post(path, body, { headers: 
     this.authService.getHeader()});
   }
   put(path, body?) {
     return this.http.put(path, body, {headers: 
    this.authService.getHeader()});
    }
   delete(path: string, body?) {
     const options = body ? {...body, headers: this.authService.getHeader()} 
    : {headers: this.authService.getHeader()};
    return this.http.delete(path, options);
  }
 }

It seems the api call fire twice. There is no header first time, then there is second call with header.