@sdgroup14

Как сделать доп функции с Anular Interceptor?

Вообщем у меня стала задача сделать цепочку запросов. 1 за другим. К примеру по клику по "итему" у меня делается 3 запроса... (З Ы апи никак не может сделать по другому). При получении данных я распихиваю это 3 виджета... ... Вообщем функция у меня шаблонная и выглядит так ($target это Subject Rxjs):

httpGetTemplate(param_url?, target?, arrCheck?) {
    const httpHandler = () => {
      const $params = param_url;
      const $target = target;
      const options = {
        headers: new HttpHeaders().set('Authorization', 'Bearer ' + localStorage.getItem('token'))
      };

      this.http.get(this.apiURL + $params, options).subscribe((_data: any) => {
        if (arrCheck) {
          const $data = _data.result;
          if ($target === this.allCategories) {
            this.allCategoriesCollection = $data;
          } else if ($target === this.checkFirebaseConnection) {
            this.checkFire = $data;
          }
        }
        $target.next(_data.result);
      }, _error => {
        console.log(_error);
        this.errorsHandler(_error, httpHandler);
      });
    };
    httpHandler();
  }


Кривовато, но оно работало.
И тут я нашел Angular Interceptor. И такую статью. Там мне понравилось

// src/app/auth/jwt.interceptor.ts
// ...
import 'rxjs/add/operator/do';
export class JwtInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
    return next.handle(request).do((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response if you want
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
          // redirect to the login route
          // or show a modal
        }
      }
    });
  }
}
This is also a great spot to cache any failed requests. This comes in handy if we have token refreshing in place and we want to retry the requests once we have a new token.

// src/app/auth/auth.service.ts
import { HttpRequest } from '@angular/common/http';
// ...
export class AuthService {
cachedRequests: Array<HttpRequest<any>> = [];
public collectFailedRequest(request): void {
    this.cachedRequests.push(request);
  }
public retryFailedRequests(): void {
    // retry the requests. this method can
    // be called after the token is refreshed
  }
}

// src/app/auth/jwt.interceptor.ts
// ...
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    
  return next.handle(req).do((event: HttpEvent<any>) => {
    if (event instanceof HttpResponse) {
      // do stuff with response if you want
    }
  }, (err: any) => {
    if (err instanceof HttpErrorResponse {
      if (err.status === 401) {
        this.auth.collectFailedRequest(request);
      }
    }
  });
}


Но дело в том что я не понимаю как потом вызывать по очереди retryFailedRequests когда токен обновится.... Плюс ко всему же еще я ж посаздавал в subscribe $target.next(data) который я распихиваю в несколько компонентов... Как мне это описать чтоб я в collectFailedRequest запихивал не request a функцию или может я не понимаю как это правильно делать? Если кто не понял зачем в subscribe $target.next(data). Это я сделал для того чтоб не делать 3 запроса в 3 виджета. Хелп плз :)
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы