WEBVTT

1
00:00.800 --> 00:02.240
Hi everyone.

2
00:02.240 --> 00:07.070
Let's continue with the core concept of nestjs.

3
00:07.850 --> 00:11.930
And in this video we will be an interceptor.

4
00:13.250 --> 00:16.880
Well interceptor is also a dependency injection class.

5
00:19.580 --> 00:31.910
And now you can see, when we send the request, it will accept by the interceptor.

6
00:31.910 --> 00:37.070
And when we respond it will catch.

7
00:37.070 --> 00:39.110
It is a interceptor right here.

8
00:42.860 --> 00:43.400
Okay.

9
00:46.070 --> 00:46.970
Now.

10
00:49.310 --> 00:56.060
Interceptor is an aspect oriented programming techniques.

11
00:56.600 --> 01:02.610
If you already know the framework like Spring Framework, Java Spring.

12
01:03.390 --> 01:10.920
We will familiar with the concept of aspect oriented programming, but if not, don't worry about that.

13
01:10.950 --> 01:14.640
I will show you how we can understand the interceptor.

14
01:15.750 --> 01:22.260
This will be the extra logic before and after method execution, or it can be used something like this.

15
01:22.290 --> 01:25.500
We can read more about us inside the documentation.

16
01:26.970 --> 01:32.400
And now you can see, well it's similar with middleware right.

17
01:32.670 --> 01:34.620
But not really.

18
01:36.390 --> 01:40.410
If I click on the middleware it's only have a one way okay.

19
01:40.440 --> 01:47.250
It only have an one way HTTP request okay.

20
01:49.440 --> 01:55.230
But with the interceptor is also the request and response right here.

21
01:55.500 --> 01:59.900
And let me show Scroll down to how to create.

22
02:01.310 --> 02:03.440
Inside the aspect interception.

23
02:03.470 --> 02:05.060
Let me copy everything over here.

24
02:05.750 --> 02:14.270
And again this is just a syntax, we don't need to memorize.

25
02:17.660 --> 02:18.050
Okay.

26
02:18.320 --> 02:21.260
Just copy last and go here.

27
02:23.270 --> 02:25.070
Create the interceptors folder.

28
02:26.720 --> 02:30.230
And in here we will be logging.interceptor.ts

29
02:37.790 --> 02:41.060
And it very similar with logger middleware right.

30
02:41.330 --> 02:43.220
But I will show you what is different.

31
02:44.300 --> 02:47.360
Now you can see, in here.

32
02:49.610 --> 02:54.290
Let me go on and organize it a little bit.

33
02:55.640 --> 02:56.970
Firstly, with "AuthGuard"

34
02:57.330 --> 03:01.680
I will change the "false", firstly will be "false"

35
03:03.180 --> 03:03.570
Okay.

36
03:03.690 --> 03:09.210
And watch me, in order to use the logging interceptor.

37
03:10.860 --> 03:12.840
I will use the @UseInterceptor

38
03:13.350 --> 03:13.710
Okay.

39
03:14.910 --> 03:16.200
Decorator like this.

40
03:16.200 --> 03:20.100
And pass the logging interceptor into the post controller.

41
03:20.130 --> 03:27.540
I will use the @UseInterceptor(LoggingInteceptor)

42
03:28.170 --> 03:36.330
And actually, I can use. I can move that inside the get method right here below the get method.

43
03:37.080 --> 03:43.140
It will only work for the post with the GET method right.

44
03:44.640 --> 03:47.010
We can use that later.

45
03:47.700 --> 03:55.210
But right now let me use inside the controller level.

46
03:55.510 --> 03:55.810
Okay.

47
03:55.810 --> 04:00.790
This is the controller level and this will be the method level.

48
04:01.750 --> 04:07.510
And when we use here, it will run "all of methods" inside that controller.

49
04:08.470 --> 04:11.320
Anyway let's see what's the interceptor.

50
04:13.630 --> 04:18.190
With the "AuthGuard" will be "false", what happened right now?

51
04:18.220 --> 04:23.650
Inside the log middleware I will console log the middleware.

52
04:23.680 --> 04:30.250
Okay, I will console.log on middleware inside the log in middleware and inside the interceptor, I will say

53
04:30.520 --> 04:33.310
this is the interceptor.

54
04:40.300 --> 04:43.390
And let's ignore that for now.

55
04:43.390 --> 04:53.400
I will explain, and post, I think I will remove the post for messy code inside the app modules.

56
04:53.400 --> 04:55.440
I will remove the post right here.

57
04:56.640 --> 05:00.090
Now let's see if I open the terminal.

58
05:02.460 --> 05:08.580
If I send a request inside the post with forbidden.

59
05:09.090 --> 05:10.230
It will return the forbidden.

60
05:10.260 --> 05:12.990
But notice it.

61
05:12.990 --> 05:14.610
Return the middleware.

62
05:17.190 --> 05:18.810
Right, interesting

63
05:18.810 --> 05:19.260
Right?

64
05:19.530 --> 05:28.860
It mean when we send a request, it always go to the middleware and after it run the middleware, it

65
05:28.860 --> 05:30.510
will run the "guard", right?

66
05:30.750 --> 05:36.720
Can you see "Guard" and after the "Guard", it will run the "Interceptor".

67
05:42.330 --> 05:48.660
After go to the interceptor, it will run the handler.

68
05:48.690 --> 05:49.110
Right.

69
05:50.130 --> 05:53.260
The route handler

70
05:58.180 --> 05:59.590
And interceptor right here

71
06:01.000 --> 06:03.970
And this here will be response.

72
06:05.290 --> 06:05.740
Okay.

73
06:06.040 --> 06:07.330
That's the flow.

74
06:08.260 --> 06:13.720
That's the flow of the Nestjs.

75
06:16.690 --> 06:23.380
Now, if I go to the "AuthGuard" and return "true"

76
06:23.920 --> 06:32.260
Now you can see, if I send a request, it will run the middleware, the guard right.

77
06:32.290 --> 06:33.610
And interceptor.

78
06:33.610 --> 06:35.710
This is the interceptor.

79
06:36.880 --> 06:37.900
I will remove here.

80
06:37.930 --> 06:41.020
I don't need to test the performance.

81
06:44.710 --> 06:47.440
And inside the pipe.

82
06:47.470 --> 06:50.360
Inside the pipe right here It will run.

83
06:51.170 --> 06:52.760
Let me remove the tap

84
06:54.470 --> 06:55.790
This is the next

85
06:55.820 --> 06:57.050
.handle().pipe()

86
06:57.440 --> 06:58.880
What's inside a pipe right here?

87
06:59.030 --> 07:07.940
Here, the pipe right here it will run before the route return.

88
07:08.480 --> 07:09.080
Okay.

89
07:09.140 --> 07:15.170
Before it return the result for the client.

90
07:15.200 --> 07:16.940
It will go to the pipe right

91
07:16.970 --> 07:19.490
Here it means I will console.log.

92
07:21.710 --> 07:24.590
Before response

93
07:32.240 --> 07:32.930
Uh, sorry.

94
07:32.930 --> 07:33.380
for that

95
07:33.410 --> 07:35.030
We must use the "tap"

96
07:36.620 --> 07:37.940
I already removed the tap.

97
07:38.210 --> 07:38.540
Okay.

98
07:38.570 --> 07:40.760
We must use the tap

99
07:40.760 --> 07:42.650
Make sure, we use the "tap" right here.

100
07:44.810 --> 07:45.380
Just a syntax

101
07:45.380 --> 07:46.370
Don't worry about that.

102
07:48.670 --> 07:52.900
But instead of pipe tap, it will return.

103
07:52.930 --> 07:59.980
it will go to the logging interceptor before it response the result.

104
08:05.230 --> 08:18.730
If I send, can you see, it mean, before it returned the data here, it will go to here first "before response"

105
08:18.730 --> 08:28.870
result, and hopefully we already know what is the logging interceptor and what is different between

106
08:28.870 --> 08:31.240
the guard or the middleware.

107
08:32.710 --> 08:33.190
Right.

108
08:37.360 --> 08:38.830
And flow

109
08:41.410 --> 08:42.160
The flow.

110
08:44.230 --> 08:46.810
So I will see you in the next video.