Myujth

I'm trying to implement a refresh login with HttpInterceptor, the problem is the flow is not the desired flow. To get new Token I do a Invisible Login with username and password.

My interceptor is:

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
 let token = localStorage.getItem('TOKEN');
 let clone: HttpRequest<any>;
 if (token) 
 let idUser = JSON.parse(this.jwtHelper.decodeToken(token).id);
 if (idUser == localStorage.getItem('idUser')) 
 if (this.jwtHelper.isTokenExpired(token)) 
 this._up.loginInvisibleEmail().subscribe(res => 
 console.log("Token Refrescado con Email");
 , error2 => 
 //TODO CATCH ERROR
 console.log("Error obteniendo refrescando token");
 );
 ;
 clone = request.clone(
 setHeaders: 
 Accept: `application/json`,
 'Content-Type': `application/json`,
 Authorization: `Bearer $token`
 
 );
 else 
 console.log("idUser diferentes");
 this._ctp.cleanStorage();
 let nav = this.app.getActiveNav();
 nav.setRoot('Login');
 
 else 
 console.log("Without TOKEN");
 clone = request.clone(
 setHeaders: 
 Accept: `application/json`,
 'Content-Type': `application/json`
 
 );
 
 console.log("HI INTERCEPTOR");
 return next.handle(clone);
 

And the service that provide me the new token is :

 loginInvisibleEmail() 
 let postParams = "email": localStorage.getItem("name"), "password": localStorage.getItem("password");
 let url = URL_SERVICIOS + "/auth";
 let headers = new Headers();
 headers.append('Content-Type', 'application/json');
 let options = new RequestOptions(headers: headers);
 return this.http2.post(url, JSON.stringify(postParams), options)
 .map(resp => 
 let data_resp = resp.json();
 if (data_resp.error) 
 this._ctp.cleanStorage();
 let nav = this.app.getActiveNav();
 nav.setRoot('Login');
 else 
 localStorage.removeItem("TOKEN");
 localStorage.setItem('TOKEN', data_resp.result['access_token']);
 
 , (error: any) => 
 this._ctp.cleanStorage();
 let nav = this.app.getActiveNav();
 nav.setRoot('Login');
 );
 

I'm trying to delete an element witht this method, and with expired token to check the flow .

deleteEducation(id): Observable<any> 
 let url = URL_SERVICIOS + '/users/educative-experience/' + id;
 // let headers = new HttpHeaders().set('Authorization', 'Bearer ' + localStorage.getItem('TOKEN'));
 return this.http
 .delete(url)
 .map(resp => 
 return resp['result'];
 )
 

The result flow is :

https://prnt.sc/lhdbxa

I need refresh token first to delete, in this case the first time I delete it fails but it refreshing token like the last step, if I delete it on second time it function well because the token was refreshing before.

How can I do this to refresh token on first time ?

Thank you in advance.