Как Angular перехватывает и инкапсулирует запросы?

В предыдущей статье, используя Api proxy в Angular, мы рассмотрели проблему локального совместного интерфейса отладки и использовали прокси.

Наши интерфейсы пишутся и обрабатываются отдельно. В реальных проектах разработки существует множество интерфейсов, некоторые из которых требуют учетных данных для входа, а некоторые — нет. Если каждый интерфейс не обрабатывается должным образом, можем ли мы рассмотреть возможность перехвата и инкапсуляции запроса? [Рекомендуемые соответствующие учебные пособия: «Учебное пособие по Angular»]

Эта статья будет реализована.

Чтобы различать среды

, нам нужно перехватывать сервисы в разных средах. При использовании angular-cli для создания проекта он автоматически различает среды в каталоге app/enviroments :

Environments.                                          
├── Environment.prod.ts // Конфигурация, используемая в производственной среде └── Environment.ts // Конфигурация, используемая в среде разработки.

Давайте изменим среду разработки:

// enviroment.ts

экспортировать константную среду = {
  базовый URL: '',
  производство: ложь
};

baseUrl — это поле, добавляемое перед запросом, когда вы его делаете. Оно указывает на адрес, который вы хотите запросить. Я ничего не добавлял. Фактически, это было эквивалентно добавлению содержимого http://localhost:4200 .

Конечно, контент, который вы добавляете сюда, должен быть скорректирован в соответствии с контентом, добавленным на ваш прокси-сервер. Читатели могут подумать и проверить самостоятельно.

Мы создаем службу перехватчика http-interceptor.service.ts . Мы надеемся, что каждый из них сможет это сделать

.

запрос будет проходить через эту службу.

// http-interceptor.service.ts

import {Injectable} из '@angular/core';
импортировать {
  HttpEvent,
  Хттпхандлер,
  HttpInterceptor, // Перехватчик HttpRequest, // Запрос} от '@angular/common/http';

импортировать { Observable } из 'rxjs';
импортировать {tap} из 'rxjs/operators';

импортировать {среду} из 'src/environments/environment';

@Инъекционный({
  предоставлено: 'корень'
})
класс экспорта HttpInterceptorService реализует HttpInterceptor {

  конструктор() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    пусть secureReq: HttpRequest<any> = req;

    secureReq = secureReq.clone({
      URL-адрес: Environment.baseUrl + req.url
    });

    вернуть next.handle(secureReq).pipe(
      кран(
        (ответ: любой) => {
          // Обрабатываем данные ответа console.log(response)
        },
        (ошибка: любая) => {
          // Обработка данных об ошибках console.log(error)
        }
      )
    )
  }
}

Чтобы перехватчик вступил в силу, мы должны внедрить его в app.module.ts :

// app.module.ts

импортировать { HttpClientModule, HTTP_INTERCEPTORS } из '@angular/common/http';
//Импорт службы перехватчика { HttpInterceptorService } из './services/http-interceptor.service';

провайдеры: [
  // Внедрение зависимостей {
    предоставить: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    мульти: правда,
  }
],

Проверка

: на этом этапе мы успешно внедрили перехватчик. Если вы запустите npm run dev , вы увидите в консоли следующее сообщение:

Чтобы проверить, требуются ли учетные данные контента для доступа к контенту, я использовал интерфейс [post] https://jimmyarea.com/api/private/leave/message чтобы попытаться получить следующую ошибку:

Серверная часть уже обработала, что для работы этого интерфейса требуются учетные данные, поэтому напрямую сообщается об ошибке 401 .

Итак, вот в чем проблема. Как нам нужно ввести наши учетные данные после входа в систему?

Изменяем содержимое перехватчика следующим образом:

let secureReq: HttpRequest<any> = req;
// ...
// Используем localhost для хранения учетных данных пользователя в заголовке запроса if (window.localStorage.getItem('ut')) {
  let token = window.localStorage.getItem('ut') ||
  secureReq = secureReq.clone({
    заголовки: req.headers.set('токен', токен)
  });
}

// ...

Срок действия этого сертификата требует, чтобы читатели оценили, действителен ли срок действия при входе в систему, а затем рассмотрели возможность сброса значения localstorage , иначе всегда будут сообщаться об ошибках. Это тоже очень просто. инкапсуляция localstorage удобна для работы. Да~

[Конец]