Como o Angular intercepta e encapsula solicitações?

No artigo anterior, usando o proxy Api no Angular, tratamos do problema da interface de depuração conjunta local e do proxy usado.

Nossas interfaces são escritas e processadas separadamente. Em projetos de desenvolvimento reais, existem muitas interfaces, algumas das quais exigem credenciais de login e outras não. Se cada interface não for tratada adequadamente, podemos considerar a interceptação e o encapsulamento da solicitação? [Tutoriais relacionados recomendados: "Tutorial Angular"]

Este artigo será implementado.

Para distinguir entre ambientes

, precisamos interceptar serviços em ambientes diferentes. Ao usar angular-cli para gerar um projeto, ele distingue automaticamente os ambientes no diretório app/enviroments :

ambientes.                                          
├── ambiente.prod.ts // Configuração utilizada no ambiente de produção └── ambiente.ts // Configuração utilizada no ambiente de desenvolvimento

Vamos modificar o ambiente de desenvolvimento:

// enviroment.ts

exportar ambiente const = {
  baseUrl: '',
  produção: falso
};

baseUrl é um campo adicionado na frente da solicitação quando você faz a solicitação. Ele aponta para o endereço que você deseja solicitar. Não adicionei nada. Na verdade, foi equivalente a adicionar o conteúdo de http://localhost:4200 .

Claro, o conteúdo que você adiciona aqui deve ser ajustado para corresponder ao conteúdo adicionado em seu proxy. Os leitores podem pensar e verificar por si mesmos.

Nós geramos o serviço de interceptador http-interceptor.service.ts

.

solicitação passará por esse serviço.

// http-interceptor.service.ts

importar {Injetável} de '@angular/core';
importar {
  HttpEvento,
  HttpHandler,
  HttpInterceptor, // Interceptor HttpRequest, // Solicitação} de '@angular/common/http';

importar {Observável} de 'rxjs';
importar {tap} de 'rxjs/operadores';

importar {ambiente} de 'src/environments/environment';

@Injetável({
  fornecidoIn: 'root'
})
classe de exportação HttpInterceptorService implementa HttpInterceptor {

  construtor() { }

  interceptação(req: HttpRequest<qualquer>, próximo: HttpHandler): Observable<HttpEvent<qualquer>> {
    deixe secureReq: HttpRequest<qualquer> = req;

    secureReq = secureReq.clone({
      url: ambiente.baseUrl + req.url
    });

    retorne next.handle(secureReq).pipe(
      tocar(
        (resposta: qualquer) => {
          // Processa os dados de resposta console.log(response)
        },
        (erro: qualquer) => {
          // Lidar com dados de erro console.log(error)
        }
      )
    )
  }
}

Para que o interceptor tenha efeito, temos que injetá-lo em app.module.ts :

// app.module.ts

importar { HttpClientModule, HTTP_INTERCEPTORS } de '@angular/common/http';
//Importação do serviço interceptor { HttpInterceptorService } de './services/http-interceptor.service';

provedores: [
  //Injeção de dependência {
    fornecer: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    multi: verdadeiro,
  }
],

Verificação

neste ponto, implementamos o interceptor com sucesso. Se você executar npm run dev , verá a seguinte mensagem no console:

Para verificar se as credenciais de conteúdo são necessárias para acessar o conteúdo, usei aqui a interface [post] https://jimmyarea.com/api/private/leave/message para tentar e obtive o seguinte erro:

O back-end já processou que esta interface requer credenciais para funcionar, portanto, um erro 401 é relatado diretamente.

Então, aí vem o problema. Depois de fazer login, como precisamos trazer nossas credenciais?

A seguir, modificamos o conteúdo do interceptador:

let secureReq: HttpRequest<any> = req;
// ...
// Use localhost para armazenar credenciais do usuário no cabeçalho da solicitação if (window.localStorage.getItem('ut')) {
  deixe token = window.localStorage.getItem('ut') ||
  secureReq = secureReq.clone({
    cabeçalhos: req.headers.set('token', token)
  });
}

//...

O período de validade deste certificado exige que os leitores julguem se o período de validade é válido ao entrar no sistema e, em seguida, considerem redefinir o valor de localstorage , caso contrário, erros serão sempre relatados. o encapsulamento do localstorage é conveniente para operação

.