1
00:00:00,180 --> 00:00:00,540
All right.

2
00:00:00,540 --> 00:00:02,520
Nice work on the manual approach.

3
00:00:02,640 --> 00:00:09,420
And now let's take a look at one of the options that Axios provides, and that is global setup.

4
00:00:09,570 --> 00:00:10,560
Now, what that means?

5
00:00:10,560 --> 00:00:13,590
Well, we import the Axios instance, correct?

6
00:00:14,340 --> 00:00:16,560
The very, very top of the app context.

7
00:00:16,620 --> 00:00:22,980
And then we can simply go with defaults headers and then common, and then we go with the name of the

8
00:00:22,980 --> 00:00:25,470
header and we set up the value.

9
00:00:26,170 --> 00:00:34,120
So if, for example, you don't want to manually add for every request of that bare token, you can

10
00:00:34,120 --> 00:00:36,250
use this global setup.

11
00:00:36,520 --> 00:00:41,980
Now, as always, at the very end of the video, I'll show you a downside, but let's try doing that.

12
00:00:42,160 --> 00:00:45,610
A quick update in the current Axios version.

13
00:00:45,940 --> 00:00:54,610
Common property returns undefined, so the correct code is headers and then we need to right away go

14
00:00:54,610 --> 00:00:56,290
for authorization header.

15
00:00:56,680 --> 00:01:00,310
Basically, we need to omit the common property.

16
00:01:00,760 --> 00:01:05,550
If you need a reference, the red mean contains correct code.

17
00:01:05,560 --> 00:01:09,610
So where we have an app context, remember we're getting the Axios.

18
00:01:09,700 --> 00:01:13,720
And just so it's a bit cleaner, at least in my opinion.

19
00:01:13,900 --> 00:01:18,190
I'm going to do it above all my display alerts, clear alerts and all that.

20
00:01:18,190 --> 00:01:24,310
So this is going to be my little sandbox where I set up the Axios and simply what we want to do over

21
00:01:24,310 --> 00:01:25,700
here, we want to go with Axios.

22
00:01:25,720 --> 00:01:32,530
Like I said, when we go defaults, then we set up the headers, then we want to go with DOT and then

23
00:01:32,530 --> 00:01:33,310
Common.

24
00:01:33,520 --> 00:01:37,110
And we also set up here the authorization.

25
00:01:37,120 --> 00:01:41,770
Now spelling probably is going to be an issue and also we don't need to dot over here.

26
00:01:41,770 --> 00:01:44,740
So let me double check authorization.

27
00:01:44,750 --> 00:01:51,310
Yeah, of course now everything looks about right and then we want to set it equal to and again we go

28
00:01:51,310 --> 00:02:00,760
with template string, let's pass in the bearer bar and then let's access the state and then token.

29
00:02:01,460 --> 00:02:02,590
Let's save it.

30
00:02:02,600 --> 00:02:08,030
And as a side note, yes, of course, you can set up a separate file where you do that, essentially

31
00:02:08,090 --> 00:02:10,870
import Axios and then you just export it.

32
00:02:10,880 --> 00:02:16,760
And once we have this one in place, let me add here Axios comment and let's keep scrolling and then

33
00:02:16,760 --> 00:02:18,110
where we have the update user.

34
00:02:18,110 --> 00:02:24,710
Now, of course, I want to test it out so I'll remove my errors and let's see what is going to be the

35
00:02:24,710 --> 00:02:26,420
response, whether everything works.

36
00:02:26,420 --> 00:02:27,770
So let me navigate back.

37
00:02:27,770 --> 00:02:33,590
I'll refresh just so there are no weird bugs and at the moment I have the beta and again, I'm going

38
00:02:33,590 --> 00:02:36,200
to go back and I'm going to send I don't know.

39
00:02:36,200 --> 00:02:39,080
Susan Maybe So let's save it here.

40
00:02:39,080 --> 00:02:40,700
Notice how everything worked.

41
00:02:40,700 --> 00:02:44,240
And again, if I take a look at my request.

42
00:02:45,030 --> 00:02:50,430
And more specifically, if I take a look at the headers, what you'll notice that we are sending the

43
00:02:50,430 --> 00:02:52,290
bear token, which is awesome.

44
00:02:52,290 --> 00:02:58,320
And that means that if we'll be setting up multiple requests, well, we don't have to repeat ourselves.

45
00:02:58,440 --> 00:03:02,520
Now, there's one downside with this global setup though, and that's the reason why we're not going

46
00:03:02,520 --> 00:03:03,090
to use it.

47
00:03:03,240 --> 00:03:04,950
What do you think is going to happen?

48
00:03:04,950 --> 00:03:12,090
If I'm going to go here with data again and I'm going to go with a weight and now I'm just going to

49
00:03:12,270 --> 00:03:20,850
get something from the coarse API, which is essentially a server that has the resources for my courses.

50
00:03:20,850 --> 00:03:24,600
So the API is this one, meaning the URL is this one course API.

51
00:03:24,810 --> 00:03:31,380
And for example, if I go for towards project, so let me grab this link over here and then I'm going

52
00:03:31,380 --> 00:03:33,150
to go with simple get request.

53
00:03:33,980 --> 00:03:35,630
Then let's pass in the URL.

54
00:03:35,630 --> 00:03:42,110
And again, I'm not really worried about console logging the data in this case, but what I am worried

55
00:03:42,110 --> 00:03:49,090
about is the fact that we will be sending our barrier token actually with this request as well.

56
00:03:49,100 --> 00:03:53,780
So let me just give it an alias of Thor's and then I'll remove this one.

57
00:03:53,780 --> 00:03:58,820
So I'll go with another console log and I'll say Thor's and this is just a showcase that of course our

58
00:03:58,820 --> 00:04:00,050
request is going to work.

59
00:04:00,050 --> 00:04:06,920
So now let's go back and let's try it out one more time where if I'm going to go here and I say not,

60
00:04:06,950 --> 00:04:11,330
yes, this always pretty much is going to be Peter, because we're not updating that value.

61
00:04:11,360 --> 00:04:17,930
So even though in my database I'm changing from John to Susan to Peter or whatever, I mean, we cannot

62
00:04:17,930 --> 00:04:18,829
see that on the front end.

63
00:04:18,829 --> 00:04:20,810
So hopefully that is not confusing.

64
00:04:20,810 --> 00:04:24,230
So let me try one more time where I'm going to go in this case.

65
00:04:24,320 --> 00:04:24,930
Anna.

66
00:04:24,950 --> 00:04:27,200
And now let's take a look at our request.

67
00:04:27,200 --> 00:04:29,390
So once we send, check it out.

68
00:04:29,390 --> 00:04:33,710
So both of the requests of that user 200.

69
00:04:33,750 --> 00:04:34,230
Awesome.

70
00:04:34,250 --> 00:04:37,700
So that work and then I have this react towards one.

71
00:04:38,360 --> 00:04:41,570
Now, like I said, what is going to be the downside of this approach?

72
00:04:42,320 --> 00:04:44,960
If I keep on scrolling, Keep on scrolling.

73
00:04:45,290 --> 00:04:46,460
What do you see over here?

74
00:04:46,490 --> 00:04:49,590
Request headers, Authorisation bearer.

75
00:04:49,610 --> 00:04:57,140
So essentially, if you have some other requests in your application, this becomes somewhat of an issue

76
00:04:57,170 --> 00:05:02,660
because the last thing you want is just start sending the tokens left and right.

77
00:05:02,750 --> 00:05:07,490
And that's why, even though it is an option, you can definitely use a global setup.

78
00:05:07,640 --> 00:05:11,330
There are some instances where it's a very nifty solution.

79
00:05:11,330 --> 00:05:15,560
It's not going to be a case with a bare token, at least in this project.