276. Introducing Interceptors

0:01

S… Speaker 1 (276. Introducing Interceptors)

We're nearing the end,

0:03

S… Speaker 1 (276. Introducing Interceptors)

but I won't leave this module without touching on one very important

0:07

S… Speaker 1 (276. Introducing Interceptors)

and very useful concept or feature that is also supported by

0:11

S… Speaker 1 (276. Introducing Interceptors)

the Angular HTTP client.

0:12

S… Speaker 1 (276. Introducing Interceptors)

And that would be intersetters.

0:14

S… Speaker 1 (276. Introducing Interceptors)

Now,

0:15

S… Speaker 1 (276. Introducing Interceptors)

what are intersetters?

0:16

S… Speaker 1 (276. Introducing Interceptors)

We're sending our HTTP requests here.

0:19

S… Speaker 1 (276. Introducing Interceptors)

And whenever we want to configure something like search params,

0:23

S… Speaker 1 (276. Introducing Interceptors)

we're doing this on a per request basis.

0:25

S… Speaker 1 (276. Introducing Interceptors)

And oftentimes,

0:26

S… Speaker 1 (276. Introducing Interceptors)

this is the way it should be because every request might need different

0:30

S… Speaker 1 (276. Introducing Interceptors)

headers.

0:31

S… Speaker 1 (276. Introducing Interceptors)

But let's imagine we want to attach this custom header to all our outgoing

0:36

S… Speaker 1 (276. Introducing Interceptors)

requests.

0:36

S… Speaker 1 (276. Introducing Interceptors)

And a more realistic scenario would be that you want to

0:40

S… Speaker 1 (276. Introducing Interceptors)

authenticate your user and you need to add a certain

0:45

S… Speaker 1 (276. Introducing Interceptors)

param or a certain header to every outgoing request,

0:48

S… Speaker 1 (276. Introducing Interceptors)

therefore, so that the backend can read that.

0:51

S… Speaker 1 (276. Introducing Interceptors)

You don't want to manually configure every request because that is very cumbersome.

0:55

S… Speaker 1 (276. Introducing Interceptors)

And for that,

0:56

S… Speaker 1 (276. Introducing Interceptors)

you can add intersetters.

0:58

S… Speaker 1 (276. Introducing Interceptors)

Now,

0:58

S… Speaker 1 (276. Introducing Interceptors)

how do intersetters work though?

1:01

S… Speaker 1 (276. Introducing Interceptors)

Let's create a new interest setter by adding a new file

1:04

S… Speaker 1 (276. Introducing Interceptors)

And I will name this the auth intersetter because I

1:08

S… Speaker 1 (276. Introducing Interceptors)

kind of want to simulate that we dare attach some header to every request

1:13

S… Speaker 1 (276. Introducing Interceptors)

that is required for authentication on our backend.

1:16

S… Speaker 1 (276. Introducing Interceptors)

Of course, we're not really using authorization here,

1:18

S… Speaker 1 (276. Introducing Interceptors)

but that's just an example.

1:20

S… Speaker 1 (276. Introducing Interceptors)

So here I will add a file and I'll name it auth -intersetter

1:25

S… Speaker 1 (276. Introducing Interceptors)

.ts or auth -intersetter .service because it actually is

1:30

S… Speaker 1 (276. Introducing Interceptors)

basically an Angular service.

1:32

S… Speaker 1 (276. Introducing Interceptors)

And in there,

1:32

S… Speaker 1 (276. Introducing Interceptors)

you create such an intersetter by exporting a class,

1:36

S… Speaker 1 (276. Introducing Interceptors)

and you give that a name,

1:38

S… Speaker 1 (276. Introducing Interceptors)

which, well,

1:38

S… Speaker 1 (276. Introducing Interceptors)

probably should be off intersetter service.

1:42

S… Speaker 1 (276. Introducing Interceptors)

You can name it however you want,

1:43

S… Speaker 1 (276. Introducing Interceptors)

but I will keep that general file naming convention,

1:46

S… Speaker 1 (276. Introducing Interceptors)

which we also used in the rest of the course.

1:48

S… Speaker 1 (276. Introducing Interceptors)

And this will implement a certain interface,

1:52

S… Speaker 1 (276. Introducing Interceptors)

and that is the HTTP intersetter interface,

1:56

S… Speaker 1 (276. Introducing Interceptors)

which you need to import from at Angular slash comment slash HTTP.

2:01

S… Speaker 1 (276. Introducing Interceptors)

Now this interface forces us to add a interset

2:05

S… Speaker 1 (276. Introducing Interceptors)

method.

2:06

S… Speaker 1 (276. Introducing Interceptors)

And that interset method here will actually get two arguments.

2:10

S… Speaker 1 (276. Introducing Interceptors)

And it will get that automatically by Angular when it applies our

2:14

S… Speaker 1 (276. Introducing Interceptors)

intersetter.

2:15

S… Speaker 1 (276. Introducing Interceptors)

And I'll show you how to apply it in just a second.

2:18

S… Speaker 1 (276. Introducing Interceptors)

So here we get two arguments.

2:20

S… Speaker 1 (276. Introducing Interceptors)

And the first one is a request object,

2:23

S… Speaker 1 (276. Introducing Interceptors)

which is of type HTTP request,

2:25

S… Speaker 1 (276. Introducing Interceptors)

which you need to import from at Angular slash comment slash HTTP as

2:29

S… Speaker 1 (276. Introducing Interceptors)

well. This is a generic type,

2:31

S… Speaker 1 (276. Introducing Interceptors)

a generic object.

2:33

S… Speaker 1 (276. Introducing Interceptors)

So you can use the angle brackets to basically inform

2:37

S… Speaker 1 (276. Introducing Interceptors)

Angular about the kind of data this request will yield.

2:41

S… Speaker 1 (276. Introducing Interceptors)

And I want to write a generic interceptor here.

2:44

S… Speaker 1 (276. Introducing Interceptors)

So I will use any because this will work for

2:47

S… Speaker 1 (276. Introducing Interceptors)

any data that might be retrieved by a request and you have a

2:51

S… Speaker 1 (276. Introducing Interceptors)

second argument which is passed to interset and that is typically

2:55

S… Speaker 1 (276. Introducing Interceptors)

called next you could of course rename these arguments but the first one is a request

2:59

S… Speaker 1 (276. Introducing Interceptors)

object so rec makes sense and this is a function which will forward

3:04

S… Speaker 1 (276. Introducing Interceptors)

the request because the intersetter will basically run

3:09

S… Speaker 1 (276. Introducing Interceptors)

code

3:10

S… Speaker 1 (276. Introducing Interceptors)

before your request leaves your app.

3:13

S… Speaker 1 (276. Introducing Interceptors)

So before it really is sent and right before the response is forwarded

3:17

S… Speaker 1 (276. Introducing Interceptors)

to subscribe.

3:18

S… Speaker 1 (276. Introducing Interceptors)

So it steps into that request flow and next is a function you

3:22

S… Speaker 1 (276. Introducing Interceptors)

need to call to let the request continue its journey.

3:25

S… Speaker 1 (276. Introducing Interceptors)

But more on that in a second too.

3:27

S… Speaker 1 (276. Introducing Interceptors)

Next is of type HTTP handler,

3:30

S… Speaker 1 (276. Introducing Interceptors)

which also needs to be imported from at Angular common HTTP.

3:33

S… Speaker 1 (276. Introducing Interceptors)

Now this intercept method.

3:37

S… Speaker 1 (276. Introducing Interceptors)

now allows us to run code that,

3:41

S… Speaker 1 (276. Introducing Interceptors)

as I just mentioned,

3:42

S… Speaker 1 (276. Introducing Interceptors)

will run right before the request leaves our

3:46

S… Speaker 1 (276. Introducing Interceptors)

application.

3:47

S… Speaker 1 (276. Introducing Interceptors)

So for example here,

3:48

S… Speaker 1 (276. Introducing Interceptors)

we could for now just log request is on

3:52

S… Speaker 1 (276. Introducing Interceptors)

its way.

3:54

S… Speaker 1 (276. Introducing Interceptors)

And thereafter,

3:55

S… Speaker 1 (276. Introducing Interceptors)

we should return the result that next yields

3:59

S… Speaker 1 (276. Introducing Interceptors)

us. Next,

4:00

S… Speaker 1 (276. Introducing Interceptors)

as I mentioned,

4:01

S… Speaker 1 (276. Introducing Interceptors)

is a function or actually an object,

4:04

S… Speaker 1 (276. Introducing Interceptors)

but an object with an important method that will allow us to let the

4:08

S… Speaker 1 (276. Introducing Interceptors)

request continue its journey.

4:09

S… Speaker 1 (276. Introducing Interceptors)

To be precise,

4:10

S… Speaker 1 (276. Introducing Interceptors)

that's the handle method,

4:12

S… Speaker 1 (276. Introducing Interceptors)

which you have to call to which you should pass that request object.

4:16

S… Speaker 1 (276. Introducing Interceptors)

And by calling this,

4:18

S… Speaker 1 (276. Introducing Interceptors)

you let the request continue and you should actually return the

4:22

S… Speaker 1 (276. Introducing Interceptors)

result.

4:22

S… Speaker 1 (276. Introducing Interceptors)

to really let it continue.

4:24

S… Speaker 1 (276. Introducing Interceptors)

So that is the setup you need to use to have some code that is run

4:28

S… Speaker 1 (276. Introducing Interceptors)

right before the request leaves the app and to still let the request

4:32

S… Speaker 1 (276. Introducing Interceptors)

leave the app.

4:33

S… Speaker 1 (276. Introducing Interceptors)

If you don't return next handle and pass the request,

4:37

S… Speaker 1 (276. Introducing Interceptors)

then the request will not continue and therefore your app will basically

4:41

S… Speaker 1 (276. Introducing Interceptors)

break.

4:41

S… Speaker 1 (276. Introducing Interceptors)

You definitely have to return this here.

4:43

S… Speaker 1 (276. Introducing Interceptors)

Now with that,

4:46

S… Speaker 1 (276. Introducing Interceptors)

we have to provide that service and we have to provide this in a special

4:50

S… Speaker 1 (276. Introducing Interceptors)

way.

4:51

S… Speaker 1 (276. Introducing Interceptors)

So let's go to the app module and in there add

4:55

S… Speaker 1 (276. Introducing Interceptors)

a new element to the providers array and that should be a JavaScript object

4:59

S… Speaker 1 (276. Introducing Interceptors)

now and not the name of that service where you have three

5:04

S… Speaker 1 (276. Introducing Interceptors)

keys.

5:04

S… Speaker 1 (276. Introducing Interceptors)

The first key is the provide key and there you have

5:09

S… Speaker 1 (276. Introducing Interceptors)

to use HTTP underscore interceptors all capital cases

5:13

S… Speaker 1 (276. Introducing Interceptors)

that is

5:15

S… Speaker 1 (276. Introducing Interceptors)

a type that is imported from at angular slash common slash http so

5:19

S… Speaker 1 (276. Introducing Interceptors)

import that from this package and use it

5:23

S… Speaker 1 (276. Introducing Interceptors)

here as a value for provide this is the token by which this injection

5:27

S… Speaker 1 (276. Introducing Interceptors)

can later be identified by by angular so it will basically know

5:32

S… Speaker 1 (276. Introducing Interceptors)

that all the classes you provide on that

5:36

S… Speaker 1 (276. Introducing Interceptors)

token so by using that identifier should be treated

5:39

S… Speaker 1 (276. Introducing Interceptors)

as HTTP intersetters and should therefore run their intercept method

5:43

S… Speaker 1 (276. Introducing Interceptors)

whenever a request leaves the application.

5:46

S… Speaker 1 (276. Introducing Interceptors)

The second key you pass to that object

5:50

S… Speaker 1 (276. Introducing Interceptors)

is the use class key where you now point at your intersetter

5:54

S… Speaker 1 (276. Introducing Interceptors)

class you wanna add as an intersetter.

5:57

S… Speaker 1 (276. Introducing Interceptors)

And here that would be the off intersetter service which

6:01

S… Speaker 1 (276. Introducing Interceptors)

you of course also need to import.

6:04

S… Speaker 1 (276. Introducing Interceptors)

And last but not least,

6:05

S… Speaker 1 (276. Introducing Interceptors)

you can have more than one intersetter and you inform Angular about

6:09

S… Speaker 1 (276. Introducing Interceptors)

that and that it should not replace the existing intersetters with this one by

6:13

S… Speaker 1 (276. Introducing Interceptors)

adding multi and setting this to true.

6:16

S… Speaker 1 (276. Introducing Interceptors)

So this is just a dependency injection syntax supported by Angular

6:20

S… Speaker 1 (276. Introducing Interceptors)

that allows us to register a service under a different identifier

6:24

S… Speaker 1 (276. Introducing Interceptors)

and to have actually multiple services under that identifier,

6:28

S… Speaker 1 (276. Introducing Interceptors)

which will then all be provided and injected.

6:32

S… Speaker 1 (276. Introducing Interceptors)

Now Angular will do the rest.

6:34

S… Speaker 1 (276. Introducing Interceptors)

It will automatically grab all your HTTP intersetters and run their

6:38

S… Speaker 1 (276. Introducing Interceptors)

interset method whenever a request leaves the application.

6:41

S… Speaker 1 (276. Introducing Interceptors)

And therefore with this setup,

6:43

S… Speaker 1 (276. Introducing Interceptors)

we should now be able to reload.

6:45

S… Speaker 1 (276. Introducing Interceptors)

and we see a request is on its way.

6:48

S… Speaker 1 (276. Introducing Interceptors)

And if I click Fetch Posts,

6:49

S… Speaker 1 (276. Introducing Interceptors)

you see it again.

6:50

S… Speaker 1 (276. Introducing Interceptors)

And if I send a different request,

6:52

S… Speaker 1 (276. Introducing Interceptors)

like sending a new post,

6:53

S… Speaker 1 (276. Introducing Interceptors)

you see it too,

6:54

S… Speaker 1 (276. Introducing Interceptors)

because this code now runs for every request that leaves the app.

6:58

S… Speaker 1 (276. Introducing Interceptors)

And if you want to restrict the requests for which this executes,

7:01

S… Speaker 1 (276. Introducing Interceptors)

you have to do that here in the Intersetter.

7:03

S… Speaker 1 (276. Introducing Interceptors)

You got that request object in the end,

7:05

S… Speaker 1 (276. Introducing Interceptors)

and that request object has information like the URL to which it sent.

7:09

S… Speaker 1 (276. Introducing Interceptors)

So if you know you don't want to send this to a certain URL,

7:14

S… Speaker 1 (276. Introducing Interceptors)

Well, then you can use the URL here in a if check and compare

7:18

S… Speaker 1 (276. Introducing Interceptors)

it and so on.

7:19

S… Speaker 1 (276. Introducing Interceptors)

So you can control that all in here in the intersetter.

276. Introducing Interceptors

Podsumowanie

Zapytaj AI o ten transkript