Невозможно правильно добавить Сервис в HttpInterceptor

Question

Я использую Ionic 4 и Angular 7. Я пытаюсь перехватить HTTP-запросы и добавить токен в заголовок. Проблема в том, что token всегда нулевое, когда я пытаюсь извлечь его из AuthService. Я добавляю AuthService в конструктор TokenInterceptor, а также добавляю AuthService. Ни один из них не работает. Что я делаю неправильно?

AuthService.ts

@Injectable({
    providedIn: 'root'
})
export class AuthService
{

  public token: string;
  public refreshToken: string;

  constructor
  (
    private http: HttpClient,
    private storage: StorageService,
  )
  {

    this.API_URL      = constants.API_URL;
    this.OAUTH_URL    = constants.AUTH_URL;

      this.storage.getTokens().then(tokens => {
        this.token            = tokens.access_token;
        this.refreshToken     = tokens.refresh_token;
      });

  }
}

TokenInterceptorService

@Injectable()
  export class TokenInterceptorService implements HttpInterceptor
  {

    constructor
    (
        private auth: AuthService,
    )
    {
    }

    setHeaders(req: HttpRequest<any>, token: string): HttpRequest<any> {
        return req.clone({
          setHeaders: {
              Authorization: `Bearer ${token}`,
              'Content-Type': 'application/json',
              'Accept': 'application/json',
          }
        });
    }

    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
    {

        console.log("token int", this.auth);    // I CAN SEE TOKEN HERE  
        console.log("token int2", this.auth.token); // TOKEN IS UNDEFINED 
        return next.handle(this.setHeaders(req, this.auth.token));
     }
}

Массив провайдеров в App.Module.ts

провайдеров: [ // .... AuthService, APIService, { предоставить: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, мульти: правда, }, ]

Я также пытался ввести AuthService, но он не работает

@Injectable()
export class TokenInterceptorService implements HttpInterceptor
{

private auth;

constructor
(
    private injector: Interjector
)
{
  this.auth = this.injector.get(AuthService);
}

  setHeaders(req: HttpRequest<any>, token: string): HttpRequest<any> {
      return req.clone({
        setHeaders: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        }
      });
  }

  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
  {

      console.log("token int", this.auth); // I CAN SEE THE TOKEN HERE ALONG WITH ALL OF THE OTHER VARIABLES AND DECLERATIONS IN `AUTHSERVICE`.  
      console.log("token int2", this.auth.token); // TOKEN IS UNDEFINED 
      return next.handle(this.setHeaders(req, this.auth.token));
   }
}

Я также попытался добавить AuthService в качестве зависимости для TokenInterceptorService

providers: [
  // .... 
  AuthService,
  APIService,
  {
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptorService,
    multi: true,
     deps: [AuthService],
  },
  // ....
]

Answer 1

AuthService - плохая идея. Поскольку это одноэлементное значение, поэтому значение токена не может быть синхронизировано, а Storage.getTokens является методом синхронизации, вы также не можете быть уверены, что AuthService.Token готов, прежде чем использовать его. И другие, 1: вы не можете получить новый токен, если он был обновлен; 2: вы не можете знать, что пользователь уже вышел из системы.

Так что, пожалуйста, сделайте это в методе setHeaders лучше. В моем источнике логика такая:

//TokenInterceptorService
async setHeaders(url) {
  let baseHeader = {/*default values*/};
  if (url in sign-in, register, logout, home or other public api) {
    return baseHeader;
  }
  let token = {};
  await storage.getToken().then(tokenData => {
    token = tokenData;
  };
  baseHeader.token = token;
  return baseHeader;
}