1 00:00:00,150 --> 00:00:00,600 Beautiful. 2 00:00:00,600 --> 00:00:07,500 We now know how we can set up the instance in Axios and we'll definitely use it for remaining. 3 00:00:07,500 --> 00:00:12,270 Our project are fetch, but we're not going to keep the headers here. 4 00:00:12,330 --> 00:00:20,400 Now technically you can leave them, but since I want to showcase the interceptors in action, actually 5 00:00:20,400 --> 00:00:24,810 move them to the interceptors and before you freak out about the name. 6 00:00:25,570 --> 00:00:26,470 Effectively. 7 00:00:26,620 --> 00:00:36,610 Our current setup is awesome, but unfortunately it still does not give me a way to handle 401 responses, 8 00:00:36,610 --> 00:00:40,240 meaning the authentication errors programmatically. 9 00:00:40,450 --> 00:00:46,690 And yes, of course I will discuss that in way greater detail later as we actually start setting up 10 00:00:46,690 --> 00:00:48,720 the code in the interceptor. 11 00:00:48,730 --> 00:00:54,700 But just to give you an overall picture, remember, we're getting this error and then that response. 12 00:00:54,700 --> 00:01:01,870 And what we need to keep in mind is that there is a huge difference between a 400 response and 401. 13 00:01:01,870 --> 00:01:08,800 Because we know that 400 is bad request where 401 is actually authentication error. 14 00:01:09,040 --> 00:01:15,040 And if we get better, I mean our response on the front end should be also different. 15 00:01:15,040 --> 00:01:21,010 And at the moment, if I'll start setting everything up again, I'll have to copy and paste and I don't 16 00:01:21,010 --> 00:01:24,620 think I need to tell you that that's probably not the best approach. 17 00:01:24,640 --> 00:01:26,050 Now, what is a better approach? 18 00:01:26,050 --> 00:01:26,470 Well. 19 00:01:27,250 --> 00:01:29,990 In Axios, there's something called interceptors. 20 00:01:30,010 --> 00:01:32,030 Now, don't freak out about the name. 21 00:01:32,050 --> 00:01:40,210 Essentially what it means is that you can attach some functionality as your request leave the application 22 00:01:40,210 --> 00:01:42,660 and as the requests are coming back. 23 00:01:42,670 --> 00:01:49,360 So in a way, you can think of it as a middleware, just like we were setting this up in the Mongoose. 24 00:01:49,390 --> 00:01:56,770 Now, in our examples, we'll be attaching this to our custom instance, because I already have that 25 00:01:56,770 --> 00:01:59,190 base URL and everything is in place. 26 00:01:59,200 --> 00:02:02,710 Keep in mind you can still use it with Axios. 27 00:02:02,950 --> 00:02:06,310 So let's say you don't want to set up the custom instance. 28 00:02:06,310 --> 00:02:11,440 You can simply go with Axios and then the code essentially is exactly the same. 29 00:02:11,680 --> 00:02:12,910 A quick update. 30 00:02:12,910 --> 00:02:18,580 In the current Axios version, the common property returns undefined. 31 00:02:19,460 --> 00:02:26,990 So the correct code is headers and then we straight away need to go for authorization header. 32 00:02:27,410 --> 00:02:30,500 Basically, we need to omit the common property. 33 00:02:30,860 --> 00:02:38,990 If you need a reference, read me contains the correct code and let me just showcase what they're saying 34 00:02:38,990 --> 00:02:39,950 here in the docs. 35 00:02:39,950 --> 00:02:45,260 So notice we can add a request interceptor as well as the response one. 36 00:02:45,590 --> 00:02:49,940 And the syntax is Axios interceptors request. 37 00:02:49,940 --> 00:02:54,920 So this is of course for requests one and the response will be for response one. 38 00:02:54,920 --> 00:02:56,360 Then they go with use. 39 00:02:56,360 --> 00:03:02,570 That's why I said that it's pretty much like a middleware here, and then we pass in two functions. 40 00:03:02,720 --> 00:03:08,330 So the first function we do something before is sent, which in our case is going to be what? 41 00:03:08,540 --> 00:03:09,980 Well, adding those headers. 42 00:03:09,980 --> 00:03:10,580 Correct. 43 00:03:10,580 --> 00:03:14,360 And then we can do something if there is a error. 44 00:03:14,360 --> 00:03:20,630 And as far as default, you can go promise, date, reject, and then you have the same thing for the 45 00:03:20,630 --> 00:03:23,810 response one and notice what's really cool. 46 00:03:23,960 --> 00:03:29,120 So in here they have a function and a status code that lie within range of 200. 47 00:03:29,150 --> 00:03:31,610 This function will be triggered, correct? 48 00:03:31,610 --> 00:03:33,680 So this is going to be the successful one. 49 00:03:33,680 --> 00:03:38,420 Now, we don't need to worry about that one time one will handle in our functions. 50 00:03:38,420 --> 00:03:45,140 Now what is super, super, super useful in our case that we have the second function which will be 51 00:03:45,140 --> 00:03:49,640 triggered if any status code falls outside of 200. 52 00:03:50,000 --> 00:03:56,450 So this is where we'll set up that logic where if it is for a one, well then maybe a good idea is to 53 00:03:56,450 --> 00:03:57,890 actually log out the user. 54 00:03:57,890 --> 00:04:00,080 And yes, I know I'm skipping a little bit. 55 00:04:00,080 --> 00:04:06,980 I've had, but I just want to give you the overall picture where essentially as our request leaves, 56 00:04:06,980 --> 00:04:09,320 we will set up that header. 57 00:04:09,320 --> 00:04:12,410 The authorization again will do that on the instance. 58 00:04:12,410 --> 00:04:16,399 And the second thing we'll do will check for those 401 errors. 59 00:04:16,399 --> 00:04:23,180 And if they're present, then we'll take, let's say, more forceful action on the front end. 60 00:04:23,180 --> 00:04:25,010 So let's navigate back. 61 00:04:25,010 --> 00:04:30,620 I mean, code is pretty much the resemblance of what you have there in the docs. 62 00:04:30,620 --> 00:04:35,330 And the only difference is that in here I'm adding authorization. 63 00:04:35,330 --> 00:04:39,500 And then as far as this error, I just want to log it. 64 00:04:39,500 --> 00:04:40,130 That's it. 65 00:04:40,130 --> 00:04:41,360 That's all I want to do.