Angular : get api access token before any http request

I'm building an app with Angular 4 (Angular 2).

I built an API that need an OAuth access token.

The token is given from calling this route :

GET /oauth/v2/token?client_id=CLIENT_ID&client_secret=CLIENT_SET&grant_type=client_credentials

The token provided will expired after 3600 seconds, therefore the client app will have to require a new access token (using provided refresh token or not).

In AngularJs (1.*) i was using interceptor for this matter. Since interceptors are not part of Angular anymore.

Let say i have 3 services :

• UserService
• ApiService
• OAuthService

i figure out 2 options :

Option 1 :

ApiService will extend Http provider as mentioned in this article.

Someone on stackoverflow was trying to use a similar solution.

Therefore in any http request i'll be able to call the server to request a new access token, if expired of course. All the logic regarding the access token (cookie storage, expire, valid access, etc.) will be in OAuthServie.

Option 2 :

ApiService will not extend Http but simply use it as a service.

Here the exemple :

UserService

export class UserService {

  constructor(private apiService: ApiService) { }

  getUsers(): Promise<User[]> {
    return this.apiService.get('/users').toPromise()
      .then(response => response.json() as User[])
      .catch(this.handleError);
  }

  /* ... */

}

ApiService

export class ApiService {

  constructor(private http: Http, private oAuthService: OAuthService) { }

  /**
   * name: get
   * params:{String}  url
   */
  get(url: string) {
    // Using Observable or Promise (promise is used as pure exemple here)
    // GET ACCESS TOKEN
    return this.oAuthService.getAccessToken().then((accessToken) =>
      // ADD TOKEN TO HEADER
      let headers = new Headers();
      headers.append('Authorization', 'Bearer ' + accessToken);
      // CALL API (/api/users for exemple)
      return this.http.get(environment.apiEndpoint + url, {
        headers: headers
      });
    );
  }

}

OAuthService :

export class OAuthService {

  private accessToken: string;

  constructor(public cookieService: CookieService, public http: Http) { }

  getAccessToken() {
    this.accessToken = this.cookieService.get('access_token');
    if(!hasValidAccessToken) {
      return this.http.get('/oauth/v2/token?client_id=CLIENT_ID&client_secret=CLIENT_SET&grant_type=client_credentials').toPromise()
        .then(response => response.json())
        .catch(this.handleError);
      }
    }
    else {
      return this.accessToken;
    }
  }

  /**
   * Check validity of token, exist, expire, etc.
   */
  hasValidAccessToken() {}

}

So i would like to know which option would be the most proper way to do such thing? Otherwise what other option would you advise taking into consideration than the access token will be expired after 3600 seconds?

Both options would require promise or observable to be able to request the api call. Otherwise if access token is not yet obtained the api call will throw an unauthorised exception. Promise would be the way to go since it is a single event, am i right?

Please advise me, i'm getting a little bit confused with all those choices.