Trouble with the AuthService > refreshToken

[kosuh]

Hello,

I allow myself to contact you because after setting up your solution everything works fine except that I block on the method refreshToken AuthService

When I make my request in http to retrieve the new token, the return executes before the request replies.

I am not very experienced in Angular so I think the solution is not difficult.

AuthService.ts

refreshToken(): Observable<any> {
		let url: string = environment.API + "/auth/token/refresh";
		let jwt = JSON.parse(localStorage.getItem('jwt'));
		const query = {
			'refresh_token': jwt.refresh_token
		}
		this.http.post(url, query).pipe(
			map((newtoken) => {
				localStorage.setItem('jwt', JSON.stringify(newtoken));
				jwt = JSON.parse(localStorage.getItem('jwt'));
				this.authTokenNew = jwt.token;
		}));

		this.currentToken = this.authTokenNew;

		return observableOf(this.authTokenNew).pipe(delay(200));
	}

Do you have a solution for me please ?

[fpeterdev]

Although it's not my repo, but I might help you a bit. Some things you want to consider:

• Http.post() is an async call, so processing won't wait for the result, that's why if you want to work with it, you have to do it in the.
• I think the delay was in the code only to make it behave like an external http call so answer with a delay.
• If you are not using authTokenNew outside of this function I think you don't need it.
• I don't see why you need to pars the jwt from localStorage right after you stored it.
• map is usally used for projection, but you could store your jwt in tap()

I think something like this should work:

refreshToken(): Observable<any> {
  let url: string = environment.API + "/auth/token/refresh";
  let jwt = JSON.parse(localStorage.getItem('jwt'));
  const query = {
    'refresh_token': jwt.refresh_token
  }
  this.http.post(url, query).pipe(
    //you can do actions or side-effect that won't change values in tap() 
    tap((newtoken) => {
      localStorage.setItem('jwt', JSON.stringify(newtoken));
    }),
    //if you want to return just the token part, map it. If you want to return the whole object, you won't need map at all.
    map((newtoken) => newtoken.token)      
  )
};