Angular 9 Tutorial For Beginners #66 - HTTP Interceptors

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn and talk about httpclient interceptors what are interceptors why do we need them and how does angular help us support with interceptors should we use it in our applications is it worth using it all these questions will be answered in this episode welcome back friends my name is shredder I am your host I bring over ten years of experience as a full-stack developer on modern web technologies will talk about and learn about angular node express react much much more I'm here to share my knowledge with you and also to learn from you all so during the course of this tutorial series if you have any doubts any queries any questions feel free to ask me in the comment section below I'll be happy to help you I'm putting in a lot of hard work in bringing these tutorials to you I'm sure you will appreciate and support me by subscribing to my channel and liking my videos thank you so much in advance this part of the angular 9th full tutorial series where we have now close to sixty five-plus tutorials ranging from introduction to advanced and I'm sure all these tutorials will help you master angular 9 in detail so make sure you check it out the link is in the description box below you don't want to miss out on that alright so this is the last part of the series on angular HTTP so we'll cover more topics the next one that I'm going to start the series is on testing but this is the last episode on this mini series on angular HTTP if you are joining new make sure you have checked out all the previous tutorials to learn angular HTTP in detail a brief about quick note on HTTP before we learn about interceptors HTTP client is used for performing all the HTTP requests and responses in angular HTTP client is available in at the rate angular slash common slash HTTP the new HTTP client service is included in the along with s typical ient module which means you have to import the httpclient module before you start using HTTP client so that's the requirement and a lot of developers will make a mistake here that they don't import the HTTP client module so make sure you have imported it in your app module also this tutorial we'll talk about interceptors and code and all that but actually this is a add-on code continuation code which is done basically on the previous episode so if you are new here I request you to please check out the previous episode so you know the and have some continuity in learning right so let's talk now about HTTP interceptors so what are interceptors and so imagine whenever you whenever your client makes a request right and it comes to server that's the typical model that we work with we have a client we have a server server client makes a request and it will get the response but what if we want to intercept that request and process some data before sending and then do some operations in the middle right and this is extremely important because you might want to do some authorization work some encoding some hashing you want to do show some loading icon' there can be multiple possibilities friends that you want to do so most interceptors will transform the outgoing request before passing it to the next interceptor right so remember there can be multiple interceptors right that is multi is true an interceptor may transform the response event stream as well as by applying additional rxjs operators on the stream written by next dot handle right which means there is a rxjs operators that we can put and we can we can put our logic basically in multiple interceptors that's what it means right there can be multiple responses but that are very very rare to be honest I have not used in any of the applications I have personally worked I have worked in large enterprise applications we did not have a need to use multiple responses I mean we had used multiple interceptors but not multiple responses on a single request right so that being said I will just give you some technical notes so that you understand in detail more so HTTP interceptors this is like an example so you can think of it this way so let's say I have a page right in most cases what happens once you log in right you will get some kind of a token or or let's say simple thing I will say client this is UI and I have a server which is your APN right so in usual model what happens client will make a request and in response the server will give it a response right this is what it is the typical model of web architecture TCP now we are saying we will we will wrap this client request right inside a box right we'll wrap it inside a box and this is what is called as an interceptor right interceptor means every request will go through this tunnel right so now if you cut it here and if you put it your logic here you have your client here you have your interceptor and then you have your server here right so interceptor is like a middleware right so you make a request it will be processed captured by the interceptor first and then it will send it to the server again and it will get back the response right so this is how the workflow works client thinks it has made a request and then it goes to interceptor and then interceptor does the processing and then finally we will have it for response from the backend server right I'll give you an example of it if it's not clear yet now let's say I am saying I want to take an example of our application that we are building right so we have contacts we have get contacts we are making delete update etc so let's list down that so I have create contact I have edit contact I have then delete and then get contacts right so I have these many API calls right that's what we learnt about in the previous episodes where we do HTTP calls right so these are all HTTP calls so here now this call is made this call is made and then this call is made and this call is made what I want to do is I want to log all the activity let's say this is a use case number one right use case number one my requirement is whenever there is a HTTP call log all activities simple right start with a simple thing so whenever there is a HTTP call logged that event lot that data and then call server okay so it will it will do that for all incoming requests so once you write that interceptor it will do the same for all the requests right so this is use case number one now I will say use case number two what is the other use cases that we can think of I will say whenever there is a request or whenever there is a HTTP call so loading icon' right let's say this is a valid right so it will do again for same right so again it will say show loading icon' so so you get the idea right so interceptor is nothing but whenever there is a request made it will be received by the Interceptor and then it will be processed and then sent to finally to the server right that is the beauty of this that we can capture the request we can process it the way we want and then finally send it to server right that being said with some examples let's see how to generate it okay so the quickest way is to use ng generate interceptor right ng generate I am using angular CLI so we have to be in the project on conversion angular generate interceptor and the name of the interceptor right so in this case it can be anything you can give anything you want I'll say log log in right you can give any name you want I'm giving it logging so generate it right so once you do ng generate interceptor you get two files generated but one is the intercepted or TS one is the spectra TS now let's go to that loading dot interceptor and you will see there is a decorator which says injectable which means it's a kind of a service right that we are injecting and then it is implementing HTTP interceptor right so it will always have a method which is intercept right it will take a request and it will take a next next is nothing but the rxjs into observable where it has to go next right that's what we are telling it via HTTP handler that means go to the next interceptor or go to the next handle we are using observable since it's an observable it will be a subscribe then we'll have to write a subscribe to process it so first thing here if you see there is a console dot log which means it will log all the activity so I will go with the default one first and then I will expand it so interceptor method once you have generated it the second step so let's say right so first step generate the Interceptor using angular CLI second step include included in the app module okay so let's go to our module tortillas right and like how we have provided here we will do something like comma I'll say provide and what will say HTTP interceptors this will always be like this okay so you always have to provide HTTP interceptors and then tell it use class what is the name of the class it's loading interceptor right so it's already imported here if you see loading interceptor okay so we just created that here oh sorry it is locking so logging interceptor so we just imported here and added added the useless login interceptor that's the one that we generated here okay so okay so far so good we have got the we said we need to provide it via HTTP interceptors and we have to use a class which is logging interceptor and then we can say that there can be multiple requests word right beautiful so now our interceptor is ready now you will see that in action ok let me go to application let me open console for you to see the right now see there is no console I cleared it now I'm going to click on get contact so it said one contact is empty okay let's say update contact okay there is a response error okay contacts not found ok let's see if our code is running ok yeah it's ok this is running ok let's do one thing let's quickly clear this and then go and there is no 4 that's why it's not working so I'm going to quickly create some junk data so we so we have so we added it and it got in the end so I'm going to add ID 4 and here I'm going to that test intercept okay so I added a ID with with for now see there is should be four here okay cuz there is an ID which is four so don't worry about this now let's click on delete so now we should see it should be using it in our interceptor and it should be logging it here okay it says contacts not found let's see what is the contact for not found it says URL not found I don't think that's a good idea actually or me let me check for it better I think we'll update these since we it's been a while that we changed this value so it's always good let's make these values change and instead of contact ID we are passing here let's pass contact ID we'll pass it here too and we'll pass it here file okay so this is this is something that I am getting a new data so that way we don't see any errors okay so now we have our interceptor in place so I'm clicking on delete so let's see that okay it says options not changed why is it giving 404 why is it giving 404 and I know API key okay update still errors I think there is something wrong let me check it quickly it sync data is not available but okay let's forget all that we don't want it complicate we'll keep it simple so what I'm doing there is a call which happened we should see that here but we have not seen that call that call happened here see contacts we made a call to contacts but it did not intercept so let me t bug that for you first so I will go to my contact start service and here I have I get contacts where I'm doing API call in the module dot yes I have my interceptors in the provider and I'm using use class and yeah they should intercept but let me close it and restart it again you'll run into issues so don't worry this is part of the job to debug and the more you become good at debugging which means you are only becoming good at coding so all right in the meanwhile if you're liking the video give a thumbs up if you have any comments any feedback for me please do let me know and be happy to improve upon all right so we have contacts but it's it made a contact but it did not rob let's see why in the logging interceptor we okay we don't have anything in the login that's why I didn't lock my bad sorry so here I'm going to log and I'm going to say request okay so now it will log all the requests and I'm instead of locking all the requests I will say call mail okay alright so you see here the message it is logging the it is logging the details of the HTTP request right here and then it is also logging calm it so if you want to capture some nodes you can say call made plus you can say request dot URL so the zero need so this will capture the URL you can say request made to write so you can say request made to this and you can capture different things like request status right so basically you can take the request object and do anything and everything with that so you can get headers you can get param so you can get the type of it and the URL the body the param serialized with credentials anything and everything with the request right so so you get the idea that whenever it is being intercepted right so if you want to take an example you can change it and let me show you that now with quickly in the get call so here I am passing let's in the get context we are passing authorization token as this right so see now I am going to change this authorization in the Interceptor right so you go to login right if request dot method is equal to equal to get right if it's or anything here I mean that doesn't matter right the idea here is to learn not make a perfect one so so what you can do is we'll take request thought is that request headers dot get and I'm saying get authorization right and take it in a Const or take it in like that I'll say HTTP or equal to so I got this value now I'm saying HTTP earth is equal to HTTP auth plus some you want to append some key or something like that you know you want to hash it or you want to say randomize it or you want to append some value right adding adding value from intercept right and this will be the new token that you get right and then what you can do is you can say HTTP request dot headers dot set you can say authorization is equal to HTTP so see in this particular request whenever there is a request made I will take the authorization value and I will set the new value which is this right so this is usually a use case where you want to where you have access token and you want to maybe refresh it or extend that time you don't want user to log out in 15 minutes so there can be multiple use cases that you can associate with it there is no one rule that you want to set so now let's see the request now let's go to our here and you see authorization is null that's because in the code we had said that value I'm going to remove that now here this code I'm removing so now it will set the value let's see it in the contacts headers we should see that now so see it says authorization arc tutorials right so in the logging interceptor let's see that request headers dot set because we have to set this value and I told you it's an interceptor right again this is not a really great example since we don't do it in client-side but you get the idea right and I'll say new new authorization or say alright so it's in contacts so we should see time out second content type alright so yeah so basically you get the idea guys that you know we have to modify it and you can see we are adding the new value that we are getting here so you can do lot of processing whatever processing your application will require you to do it you can add it here these are some of the examples that you can take and modify them give it a try let me know if you have any doubts any queries I'll be happy to help you in the meanwhile we will cover this again interceptor I know it's an important topic I don't want to leave you in half way but we will do a complete credit operation there again we will use interceptor to decode and encode some of the values so stay tuned for that I don't want to drag this tutorial long so I'll see you this is what we just did we generated the Interceptor we have included that in the providers and then we extended some of the functionality as per logic that we wanted alright so that starting next I am going to start a series on angular testing where I will teach about how to test your apps in angular what are the CLI tools we have etc I hope you are liking the videos I hope you are enjoying it as much as I am enjoying bringing it to you please keep motivating and encouraging me see you in the next series where we cover about angular testing thank you so much for joining guys I appreciate and I really encourage get feel encouraged with all your love and support thank you so much

Channel: ARC Tutorials

Views: 18,624

Rating: 4.7375565 out of 5

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular http interceptors example, angular http interceptor tutorial, angular 9 http interceptor

Id: h4v6tH9afeE

Length: 23min 7sec (1387 seconds)

Published: Tue Jul 14 2020