Angular 7 — HTTP e Autenticação
Depois de um bom tempo sem postar, eis que me sobra um tempinho para compartilhar um pouco do que venho estudado nesses últimos meses, sendo assim o primeiro post do ano será sobre requisições Http no Angular 7.
Fazer requisições Http em aplicações Angular 7 é um pouco diferente do que estamos acostumados com a primeira versão do Angular, uma diferença fundamental é que o HttpClient do Angular 7 retorna objetos observáveis.
É justo dizer que a maior parte do Angular 7 parece completamente diferente do 1.x Angular e a API Http não é uma exceção. O serviço $http que o Angular 1.x nos fornece funciona muito bem para a maioria dos casos de uso e é bastante intuitivo de usar. Já no Angular 7 o HttpClient requer que aprendamos alguns novos conceitos, incluindo como trabalhar com objetos observáveis.
Diferenças entre Angular 1.x $http e Angular 7 HttpClient
A implementação Http do Angular 7 novamente fornece uma maneira simplista de lidar com requisições, mas existem algumas diferenças importantes.
Primeiramente as chamadas Http no Angular 7 por padrão retornam objetos observáveis através de RxJS, enquanto que o $http no Angular 1.x retorna Promessas. O uso de fluxos observáveis nos provê uma maior flexibilidade quando se trata de lidar com as respostas provenientes de requisições Http.
Por exemplo, como reparar que uma requisição Http falha seja automaticamente reenviada, o que é útil para casos em que os usuários têm comunicação de rede fraca ou intermitente.
Veremos mais adiante no artigo como podemos implementar operadores RxJS em nossos observáveis .
No Angular 7 o HttpClient é acessado como uma classe injetável e assim como outras classes, nós importamos quando queremos usá-la em nossos componentes. O Angular 7 também vem com um conjunto de interceptadores injetáveis para Http, que são importados via HTTP_INTERCEPTORS.
Em Angular 1.x, faríamos isso fornecendo uma função transformRequest ou transformResponse para nossas opções de $http, podemos transformar solicitações globalmente na configuração da aplicação.
Já no Angular 7 implementaríamos a interface HttpInterceptor.
Destrinchando o HttpClient
A decorrer deste artigo veremos como trabalhar com requisições POST e GET, que exigirá que recuperemos e armazenemos um JWT(Token), sendo assim implementaremos uma autenticação básica.
Requisição GET simples
Vamos começar com uma simples requisição GET para a rota /api/clients que não requer autenticação.
O método getAll começa parecendo bastante familiar — fazemos uma requisição http.get passando uma URL como um argumento. Lembrando que no caso do $http do Angular 1.x este é o lugar onde nós consumiríamos a promessa que começamos e que será retornada usando .then, mas como você pode ver aqui, nós estamos fazendo algo consideravelmente diferente.
Como foi mencionado anteriormente, chamadas Http no Angular 7 retorna objetos observáveis, sendo assim precisamos usar métodos RxJS para operar sobre eles.
Requisição POST
Nosso método de autenticação precisará fazer uma requisição POST para o back-end e especificar o tipo de conteúdo para que possamos enviar nossas credenciais. Para isso, usaremos cabeçalhos.
O método de autenticação aceita dados que são transmitidos da exibição quando o formulário é enviado. Estamos pegando o nome de usuário e senha dele e fazendo uma string de credenciais na forma que o servidor espera.
A requisição acontece e partir daqui, o objeto observável retornado é tratado da mesma maneira que vimos no pedido GET. Posteriormente armazenamos o token que é recebido no localStorage.
Para mais detalhes de sobre a implentação de requisições Http no Angular 7 acesse a documentação completa.
Conclusão
Requisições Http no Angular 7 é definitivamente uma abordagem diferente do que foi feito no Angular 1.x, mas com a mudança vem um grande impulso na capacidade. Ter requisições onde o retorno são objetos observáveis é ótimo porque seremos capazes de utilizar os operadores RxJS para que os fluxos retornados se comportem da maneira que gostamos.
Neste artigo vimos como Http pode ser usado para fazer pedidos GET e POST para autenticação, mas também podemos usar outros tipos de requisições HTTP como PUT, DELETE e PATCH. Também vimos como podemos personalizar os cabeçalhos que enviamos com a classe Headers.
Bons estudos, deixem seus comentários e até a próxima!!!
