All right.
Nice work on the manual approach.
And now let's take a look at one of the options that Axios provides, and that is global setup.
Now, what that means?
Well, we import the Axios instance, correct?
The very, very top of the app context.
And then we can simply go with defaults headers and then common, and then we go with the name of the
header and we set up the value.
So if, for example, you don't want to manually add for every request of that bare token, you can
use this global setup.
Now, as always, at the very end of the video, I'll show you a downside, but let's try doing that.
A quick update in the current Axios version.
Common property returns undefined, so the correct code is headers and then we need to right away go
for authorization header.
Basically, we need to omit the common property.
If you need a reference, the red mean contains correct code.
So where we have an app context, remember we're getting the Axios.
And just so it's a bit cleaner, at least in my opinion.
I'm going to do it above all my display alerts, clear alerts and all that.
So this is going to be my little sandbox where I set up the Axios and simply what we want to do over
here, we want to go with Axios.
Like I said, when we go defaults, then we set up the headers, then we want to go with DOT and then
Common.
And we also set up here the authorization.
Now spelling probably is going to be an issue and also we don't need to dot over here.
So let me double check authorization.
Yeah, of course now everything looks about right and then we want to set it equal to and again we go
with template string, let's pass in the bearer bar and then let's access the state and then token.
Let's save it.
And as a side note, yes, of course, you can set up a separate file where you do that, essentially
import Axios and then you just export it.
And once we have this one in place, let me add here Axios comment and let's keep scrolling and then
where we have the update user.
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
response, whether everything works.
So let me navigate back.
I'll refresh just so there are no weird bugs and at the moment I have the beta and again, I'm going
to go back and I'm going to send I don't know.
Susan Maybe So let's save it here.
Notice how everything worked.
And again, if I take a look at my request.
And more specifically, if I take a look at the headers, what you'll notice that we are sending the
bear token, which is awesome.
And that means that if we'll be setting up multiple requests, well, we don't have to repeat ourselves.
Now, there's one downside with this global setup though, and that's the reason why we're not going
to use it.
What do you think is going to happen?
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
get something from the coarse API, which is essentially a server that has the resources for my courses.
So the API is this one, meaning the URL is this one course API.
And for example, if I go for towards project, so let me grab this link over here and then I'm going
to go with simple get request.
Then let's pass in the URL.
And again, I'm not really worried about console logging the data in this case, but what I am worried
about is the fact that we will be sending our barrier token actually with this request as well.
So let me just give it an alias of Thor's and then I'll remove this one.
So I'll go with another console log and I'll say Thor's and this is just a showcase that of course our
request is going to work.
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,
yes, this always pretty much is going to be Peter, because we're not updating that value.
So even though in my database I'm changing from John to Susan to Peter or whatever, I mean, we cannot
see that on the front end.
So hopefully that is not confusing.
So let me try one more time where I'm going to go in this case.
Anna.
And now let's take a look at our request.
So once we send, check it out.
So both of the requests of that user 200.
Awesome.
So that work and then I have this react towards one.
Now, like I said, what is going to be the downside of this approach?
If I keep on scrolling, Keep on scrolling.
What do you see over here?
Request headers, Authorisation bearer.
So essentially, if you have some other requests in your application, this becomes somewhat of an issue
because the last thing you want is just start sending the tokens left and right.
And that's why, even though it is an option, you can definitely use a global setup.
There are some instances where it's a very nifty solution.
It's not going to be a case with a bare token, at least in this project.