Angular 10 Tutorial #78 - HTTP Interceptor Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about http interceptors what are interceptors why do we need them and how can it add value in our angular applications we will learn all about it in practical way in today's episode this is part 78 of the angular 10 complete tutorial playlist i have planned more than 100 tutorials for you in the series today we are on the 78th episode if you like my work please do consider buying me a coffee at buy me a coffee.com arc tutorials the playlist link is in the description box below so make sure you check out all the previously covered episodes so that you can learn and master angular in detail if you have any doubts in following topics that i have covered previously please do reach out to me in the comments section i will be happy to help you and clear your doubts that being said let's get started a quick word to our viewers who are joining us new on http client http client is used for performing http request and responses anything that we work with backend apis or server we will require to make a request we make that using http client in order to work with http client we will have to import http client module into our app module http client provides us useful functionalities like interceptors headers params etc i have covered all of these topics previously in the episode so make sure that you check out the previous episodes to learn and master http client today's topic is http interceptors so what are interceptors i will walk you through some theory first and then show you practical use cases and we will do some hands-on lab as well so let's learn about http interceptors http interceptors intercepts and handles any http request or http response most interceptors transform the outgoing request before passing it to the next interceptor now what do we mean by this this is a very very important line to understand because this is what you would be doing in most applications whenever we try to make a request to the backend apis or server we have to pass details like authentication token username passwords etc that's where our interceptors comes into major play we can process the outgoing request append more headers params etc before actually making the call and since they are done in the interceptor you don't have to do it for each specific request they are done for all outgoing requests it is also rare but valid for an interceptor to return multiple responses on the event stream for a single request we will see all of these details now in hands-on lab alright so let me open up the application let me just fire this up here ng serve this is our application and i will show you how to generate a interceptor how to work with it let's allow one quick minute in the meanwhile please do consider subscribing to my channel to keep supporting and encouraging me all right so let's get this compiled in the meanwhile let me open up a notes for you so we can make some notes here all right so intercept any outgoing requests so we can add more details mostly i would say this is what most of the time we do we add authentication tokens we add headers which has the details of your username password rules etc but mostly in the form of tokens okay so that's where interceptors are mostly used interceptors are also used for common error handling across all http requests right so this is what interceptors are mainly used for right so our application is compiled so let's get started now so if you are following along in this particular series in the customers module we have added some code which is to get the details let me show you here all right so if you see here we did this previously in the episodes where we made a call using http get request so if you see this implementation we added headers we added the params and we are making a call to this particular url all right so this is what we were doing so far now if you see here in the customers module you would do all the error handling by yourself like here so we are subscribing to this particular method which is making a call to the api and we are processing the error here but this has to be done for each request then that doesn't make sense right so what we need to do is to add common functionality which can be used throughout all the requests right so if you see here okay my bad let me open it here it's 11 all right okay i lost the notes but it should be here 12 okay so now what we are going to do we are going to first learn how to generate generate a http interceptor okay so angular cli has that provision so you can just run the command ng generate interceptor and given by the name of it that you want okay so let's go ahead and generate one and we are going to go into the project and here we are going to say ng generate interceptor followed by the name so i'm going to call it a common right that's a usually a simple name it has to be inside the project okay and that is simple crm and then run the command here all right so once this is done we would see that it will generate two files for us you can see here interceptor.ts and this peg file which is the unit testing file all right so we got our interceptor file created now let's check it out once all right so here you see common interceptor dot yes right so here you will see that it has a request and the next the request is the one that is the outgoing request that we want to process or clone or change it the next is the next handler which is where should it go next so we can have multiple chain of interceptors that we want to do one we can have authentication next let's say we have roles etc so we can have multiple interceptors also for the sake of simplicity and for your learning i'm keeping it simple so that you learn how to do it so once we generate an interceptor now we need to add it into our app module so let's do that now go to our app module and in the providers okay you will write provide followed by you will have to import http interceptors and then you will write use class and this will be our interceptor that we used and followed by we will say multi is true right so now see what we have done we have added and said that we are providing http interceptors which is again imported here if you see from angular common http now once you have done it you are telling which class to use that is common interceptor and multi true okay so before i show you this you should understand the difference between what is what will happen when you have an interceptor what will happen when you don't have it difference when you have interceptor and when you don't have one okay so for that what i'm going to do i'll switch back to app module for a minute and i'm going to comment this line off okay so right now we are not providing the interceptor because i want to show you the difference so let's go to our application and refresh and type localhost and you would see this open inspect element and you have the network tab and i'm going to say slash customers and go to your log and you can see this is the request we are making for getting the customers this is the url we are requesting now if you see we are not changing anything here previously i showed you injecting the authentication token via headers right but that has to be done for each request that doesn't make sense anymore instead we want to have the common token mechanism through interceptor so let's go ahead and fix that now so re-enable this and i will show you the difference now so once you have enabled the http interceptors in common interceptor let's go here and here we are going to work on this particular request and what exactly are we going to do we are going to change it i'll show you how alrighty so what we are going to do here is first just put a simple authentication key okay let's say we want to send an authentication token to all the outgoing requests so i'm going to define and say api underscore key is equal to some api key one two three some value all right and now i'm going to say request dot clone clone means copy this exact request that is coming in and then modify it and then what are we going to modify we are going to set headers here we are going to pass our headers which is api underscore key now see this says no overload matches right so we need to pass some headers which is something like this so here we are going to pass this and add one more and then we can say save all right so now what we have done we have set an api key which has a value and we are setting it as a header now this header will be added to all the outgoing request let's see it in action let's run it again let's refresh and go to our console and network now let's open our request that has gone and let's see what the values are going and here we can clearly we should see the values that we are setting so this is options don't look at options look at the get so here you see this value api underscore key that got added through the interceptor okay let me show you one more so that you know how it is done now here we can add one more and we'll call it um roll underscore key and this let's call it roll okay so now here you are setting the so now we are setting api key and we are setting the role key as headers in our request.clone so what this does is basically clone clone means copy the existing request and modify it okay you're taking the request that is coming in then adding or appending these headers and sending it out save it and you should see that in action now go to your console in and here in the get call you would see api underscore key and role underscore key so these are the values that got added appended through interceptor extremely useful concept when you're working with authentication tokens auth tokens or user validation role validations etc okay so now you don't have to do for individual request it is done at the interceptor level so we can go ahead and remove any unwanted code that we made as part of our user service so see here we are in the http params here we are setting the headers now we can safely remove this headers because we don't have to set it for each request we can directly do it at the interceptor level we don't need this headers anymore here right because we set the headers in our common interceptor dot ts right so that is the beauty of interceptors now let me show you how you work with it when you have error handling okay so i'm going to comment this take it here all right so once you have this handle right so you can always write a dot pipe and you can work with it and say dot pipe and here you can write dot catch error and furthermore you can work with any of the things like retry right so if you're working with if you're working with rxjs you would know that you would do something like catch error and you would do a global kind of object like this and you can capture all the things that you want okay so now let's i'm going to import it so once you have the rxjs installed probably you will get this so i have not done it but this is how you can do common error handling also or you can say retry x number of times etc so go ahead give it a try to interceptors let me know because i am going to cover rxjs with angular very soon wherein i will cover pipe map catch error all of these options for you in detail but for now today focus on learning and implementing interceptors that's the point of discussion today so make sure that you master it well try to add some headers try to send it to your request and you would see that for every request you are adding the headers and it's working as expected all right so that was all about interceptors that you should know in today's episode and like i said uh generate it using ng generate interceptor provide it in the app module wherever you want to use it and then in the next dot handle clone or modify that request based on your application in the next episode i'm going to cover about http observables subscribe and to promise because these are the most frequently used when you're working with any http client requests stay tuned for that if you like my work please do consider subscribing to my channel also please do if you like my work please do consider buying me a coffee at buy me a coffee.com slash arc tutorials thank you so much for joining see in the next episode

Channel: ARC Tutorials

Views: 4,845

Keywords: angular interceptor tutorial, angular HTTP interceptor example, angular http interceptor tutorial, angular http example tutorial, angular httpclient tutorial, angular httpclient module tutorial, angular services tutorial, angular http tutorial, angular http client module tutorial, angular httpclient example tutorial, Angular 10 Tutorial, angular 10 crash course, angular 10 full course, angular full example, angular 10 beginners tutorials, angular services example

Id: jBwKPCW55KY

Length: 16min 18sec (978 seconds)

Published: Sat May 29 2021