Обновить токен (JWT) в перехватчике Angular 6 - PullRequest
Новая
       20

Обновить токен (JWT) в перехватчике Angular 6

0 голосов
/ 24 октября 2018

Изначально у меня была функция, которая просто проверяла наличие токена и, если его не было, отправляла пользователя в заголовок логина.Теперь мне нужно реализовать логику обновления токена, когда он истекает с помощью обновляющего токена.Но я получаю ошибку 401. Функция обновления не успевает работать и работа в перехватчике идет дальше к ошибке.Как я могу исправить код, чтобы я мог дождаться завершения обновления, получить новый токен и не перенаправлять на страницу входа?

TokenInterceptor 

import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
import {Injectable, Injector} from "@angular/core";
import {AuthService} from "../services/auth.service";
import {Observable, throwError} from "rxjs";
import {catchError, tap} from "rxjs/operators";
import {Router} from "@angular/router";
import {JwtHelperService} from "@auth0/angular-jwt";

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptor implements HttpInterceptor{

  private auth: AuthService;

  constructor(private injector: Injector, private router: Router) {}

  jwtHelper: JwtHelperService = new JwtHelperService();

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

    this.auth = this.injector.get(AuthService);

    const accToken = this.auth.getToken();
    const refToken = this.auth.getRefreshToken();

    if ( accToken && refToken ) {

      if ( this.jwtHelper.isTokenExpired(accToken) ) {
        this.auth.refreshTokens().pipe(
          tap(
            () => {
              req = req.clone({
                setHeaders: {
                  Authorization: `Bearer ${accToken}`
                }
              });
            }
          )
        )
      } else {
        req = req.clone({
          setHeaders: {
            Authorization: `Bearer ${accToken}`
          }
        });
      }

    }
    return next.handle(req).pipe(
      catchError(
        (error: HttpErrorResponse) => this.handleAuthError(error)
      )
    );
  }

  private handleAuthError(error: HttpErrorResponse): Observable<any>{
    if (error.status === 401) {
      this.router.navigate(['/login'], {
        queryParams: {
          sessionFailed: true
        }
      });
    }
    return throwError(error);
  }

}

AuthService 

import {Injectable} from "@angular/core";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {RefreshTokens, Tokens, User} from "../interfaces";
import {map, tap} from "rxjs/operators";

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

  private authToken = null;
  private refreshToken = null;

  constructor(private http: HttpClient) {}

  setToken(authToken: string) {
    this.authToken = authToken;
  }

  setRefreshToken(refreshToken: string) {
    this.refreshToken = refreshToken;
  }

  getToken(): string {
    this.authToken = localStorage.getItem('auth-token');
    return this.authToken;
  };

  getRefreshToken(): string {
    this.refreshToken = localStorage.getItem('refresh-token');
    return this.refreshToken;
  };

  isAuthenticated(): boolean {
    return !!this.authToken;
  }

  isRefreshToken(): boolean {
    return !!this.refreshToken;
  }

  refreshTokens(): Observable<any> {

    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Bearer ' + this.getRefreshToken()
      })
    };

    return this.http.post<RefreshTokens>('/api2/auth/refresh', {}, httpOptions)
      .pipe(
        tap((tokens: RefreshTokens) => {
          localStorage.setItem('auth-token', tokens.access_token);
          localStorage.setItem('refresh-token', tokens.refresh_token);
          this.setToken(tokens.access_token);
          this.setRefreshToken(tokens.refresh_token);
          console.log('Refresh token ok');
        })
      );
  }

}

Ответы [ 3 ]

0 голосов
/ 29 октября 2018

Вы должны сделать что-то подобное: 

const firstReq= cloneAndAddHeaders(req);

return next.handle(firstReq).pipe(
   catchError(
      err => {
         if (err instanceof HttpErrorResponse) {
            if (err.status === 401 || err.status === 403) {
               if (firstReq.url === '/api2/auth/refresh')) {
                  auth.setToken('');
                  auth.setRefreshToken('');
                  this.router.navigate(['/login']);
               }
               else {
                  return this.auth.refreshTokens().pipe(
                     mergeMap(() => {
                        const secondReq = cloneAndAddHeaders(req);
                        return next.handle(secondReq);
                     })
                  );
               }
            }
            return throwError(err.message || 'Server error');
         }
      }
    )
 );

Реализация cloneAndAddHeaders очевидна.

0 голосов
/ 29 октября 2018 
req = this.auth.refreshTokens().pipe(
      switchMap(() => req.clone({
            setHeaders: {
              Authorization: `Bearer ${this.auth.getToken()}`
            }
          }))
      )

Это сначала вызовет refreshToken и запустит там tap, затем отправит запрос с новым this.auth.getToken(), обратите внимание, что accToken все еще имеет старое значение, так как код не перезапускается.

0 голосов
/ 26 октября 2018

В вашем примере вы никогда не подписываетесь на свой код refreshTokens().pipe().Без подписки наблюдаемое не будет выполнено.

...