title: Angular JWT interceptor switch bearer token for refresh
body: <p>I have implemented a JWT and refresh token flow. When I implemented this in the past, I did it a bit differently, mainly that the refresh token was sent in the body.</p>
  <p>But now I've done it differently, and I have to send the access token via the Authorization header, but my interceptor code doesn't want to switch out the bearer token. How do I fix, that if I'm wanting to refresh, I actually use the refresh token as the bearer token instead of the access token that has expired?</p>
  <pre><code>intercept(
      request: HttpRequest&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      const token = this.userService.getJWTToken();
      if (token) {
        request = this.addToken(request, token);
      }
  
      return next.handle(request).pipe(
        catchError((error) =&gt; {
          if (error instanceof HttpErrorResponse &amp;&amp; error.status === 401) {
            return this.handle401Error(request, next);
          } else if (error.status !== 0) {
            return throwError(error);
          }
        })
      );
    }
  
  private addToken(request: HttpRequest&lt;any&gt;, token: string): HttpRequest&lt;any&gt; {
      return request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
        },
      });
    }
  
    private handle401Error(
      request: HttpRequest&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      if (!this.isRefreshing) {
        this.isRefreshing = true;
        this.refreshTokenSubject.next(null);
  
        //This is what I've tried, to switch out the tokens
        request = this.addToken(request, this.userService.getRefreshToken());
  
        //this.userService.refreshToken() is a POST request, where I want the refresh token as the bearer token, instead of the access token
        return this.userService.refreshToken().pipe(
          switchMap((token: TokenDTO) =&gt; {
            this.isRefreshing = false;
            this.refreshTokenSubject.next(token.accessToken);
            return next.handle(this.addToken(request, token.accessToken));
          })
        );
      } else {
        return this.refreshTokenSubject.pipe(
          filter((token) =&gt; token != null),
          take(1),
          switchMap((accessToken) =&gt;
            next.handle(this.addToken(request, accessToken))
          )
        );
      }
    }
  </code></pre>
  <p>I have also tried setting the HTTP header to the authorization bearer token, in the post request</p>
  <pre><code>public refreshToken(): Observable&lt;TokenDTO&gt; {
      const headers = new HttpHeaders({
        'Content-Type': 'application/json',
        Authorization: `Bearer ${this.getRefreshToken()}`,
      });
  
      return this.httpClient
        .post&lt;TokenDTO&gt;(`${this.hostname}/users/refreshToken`, {}, headers)
        .pipe(
          tap((tokens: TokenDTO) =&gt; {
            this.saveTokens(tokens);
          })
        );
    }
  </code></pre>