Как сделать http-запросы, используя HTTP Intercepters

Question

Я пытаюсь реализовать приложение angular, в котором я буду выполнять вызовы API для бэкэнда для получения данных. Как я могу создать Interceptor для выполнения запросов (GET, POST, PUT, DELETE) на внутренние URL-адреса. Также есть некоторые определенные маршруты, для которых требуется токен авторизации.

Кроме того, я хочу обрабатывать определенные задачи на основе кодов состояния ответа. Если backend возвращает 401 или 500, 202 (имеет токен refre sh), я хочу обработать их соответствующим образом. Также есть ли способ подписаться на запрос от angular компонентов.

Как новичок, я не очень представляю, как создать это гибким способом, чтобы, если мое приложение будет расти в будущем, оно не создавало никаких проблем.

Answer 1

Проверьте следующий шаблон перехватчика для обработки отправляющего токена в заголовке, обновите sh токен и обработайте ошибки на основе статуса ответа

import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor,
    HttpErrorResponse,
    HttpHeaders,
    HttpClient
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, flatMap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';

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

    constructor(private httpClient: HttpClient) { }

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

        const token = "my-token-string-from-server";

        //Authentication by setting header with token value
        if (token) {
            request = request.clone({
                setHeaders: {
                    'Authorization': token
                }
            });
        }

        if (!request.headers.has('Content-Type')) {
            request = request.clone({
                setHeaders: {
                    'content-type': 'application/json'
                }
            });
        }

        request = request.clone({
            headers: request.headers.set('Accept', 'application/json')
        });

        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse) => {
                if (error.status == 401 && error.error) {
                    return this.refreshToken(next, request);
                }
                return throwError(this.handleError(error));
            }));
    }

    handleError(error) {
        if (error.status == 400) {

        } else if (error.status == 422) {

        } else if (error.status = 404) {

        }
    }

    refreshToken(next, request): Observable<any> {
        var header = new HttpHeaders({
            "refreshToken": "refreshToken",
            "token": "token"
        });
        var url = environment.apiUrl + "/refreshToken";
        return this.httpClient.get(url, { headers: header }).pipe(
            flatMap(response => {
                //console.log(response);
                // save new token
                request = request.clone({ headers: request.headers.set('token', (<any>response).token) });
                return next.handle(request).pipe(
                    catchError(error => {
                        return throwError(this.handleError(error))
                    })
                )
            }),
        )
    }

}