Okay.
One last small task to go and let's clean things up here.
And the goal of what we're going to do in this particular lesson is currently I'm logged in as admin.
Let's log out of admin now.
And I'll just log in as Bob at test.com with the password.
And of course what we would not like Bob to be able to do is access the inventory.
But Bob can.
But Bob is not an admin and Bob does not have this kind of functionality.
Bob cannot delete a product.
And if I do try and delete a product as Bob, then actually we don't see the error because we never
did create a toast for a 403 forbidden, because that is what would come back for that.
So let's do that now and we'll go to our base API first of all, and we'll handle the case of a 403.
And I'll just copy the 401 and paste it below here.
And of course change the case to a 403, which is what we get if somebody is forbidden, and we'll just
take a look and see what we get back for this.
And maybe we'll need to update the title, because I didn't actually check the Chrome DevTools to see
what we did get back.
So we'll just see what happens.
First of all, and if I try and do that again as Bob, I'll click on the delete button and still nothing.
So let's check the Chrome DevTools.
I don't think we get anything significant back for a 403.
I'll try it again.
And we've got the 403 forbidden.
But if we take a look at the preview, it's just empty.
So we need to specify a message ourselves for that.
And I'll just come back and do we have a title in response data?
I don't think we've got any response data from this one specifically.
So I may just be checking the case here.
Let's see what do we get in our response?
I think we get nothing.
Yeah, we get absolutely nothing.
Just simply a 403 forbidden okay.
So all we're going to check for is the response.
Data will be an object, but we won't check for the title.
And we will just say as the toast error forbidden.
And we could put the case in here as well.
Just say for a three forbidden for that one.
Keep it simple and we'll go back and take another look.
And let's try deleting a product again as Bob.
And then we see the toast coming up.
So Bob is not allowed to edit, create or delete products.
So there's very little point in Bob having access to the inventory.
So let's go and take a look at how we can prevent Bob from accessing this component.
And let's go back to our require auth component which we put inside our routes folder.
And if we take a look at our routes then we've got the require auth.
This is our check to see if a user's authenticated and all of our authenticated or authentication required
components are inside here.
Let's make an update to the require auth so that we also check the user's roles if they're trying to
get to an admin route.
So we need to make sure if they're authenticated first that's going to come first.
If they're not authenticated there's little point trying to check which role they're in as they're in
no role.
So after we've confirmed they're a user, they'll have to get through another check that we'll add here.
But we'll declare some admin routes, even though I only have one, just to make it a bit more flexible
than just a single admin route.
But we're going to have one admin route for sure.
That's our inventory route, and I'm just going to add one as an example.
Maybe we've got an admin dashboard which we do not have and we're not going to create.
This is really just an example of using an array so that if you did have many admin pages, then you
could list them inside here.
And then you just need one check to see if the location the user is trying to get to is included in
this list of routes.
So then we can check and say if admin routes includes and then we can use the location dot path name
which we've already got inside this component.
Use double ampersand and not user and roles and includes.
And then in quotes we're going to specify admin.
And if that is the case, we're not going to do anything significant with a user interface because they're
trying to get somewhere.
They're not allowed to go to you anyway.
We'll just use the navigate component again, and we'll just send them back to the home page.
And we'll specify replace in the URL instead of a push.
So even if they click the back button they're not going to go back to the inventory.
We're just replacing the URL with the home link.
And if we take a look at the effect of that well Bob's been kicked back to the home page.
Let's go to the catalog.
And I've still got the link available of course to go to the inventory.
If I click on this, then we're simply pushed back to the home page and there is no inventory access
for Bob.
Okay, so that's one thing, but I've also got the link inside the menu.
Let's not tease Bob and give him an option that he thinks he has available.
And you could argue I'm teasing him with my profile that we've also not created inside this training
course, but the inventory is one he's not allowed to access, so we'll also go and adjust that as well.
So in the user menu and this is not complicated code we're looking at here.
We just need to bring our user in which we already have inside our user menu.
And then all we'll do for this is where we've got our inventory link.
We'll just check the user dot roles dot includes.
And then we'll check for the admin role.
And if the user is in the admin role, then we're simply going to use the ampersand and display that
link.
And if they're not in the admin role, they do not see that link.
And if we go back and double check that, if I look at Bob's menu, then the inventory is gone.
And if we just check the admin user is still functioning as we'd expect them to.
And we'll go to the admin at test.com with the password.
And we go to the inventory page.
Then the admin still has the desired functionality and the admin would be able to update a product name.
Click submit.
And we're not going to see a 403 for that, because the protection and the authorization takes place
on our API back end.
So we've made it through the rather simple inventory that I wanted to demonstrate, so that we have
something to do with our admin user and also demonstrate the Crud operations as well, which we've accomplished
inside this section.
So we're now ready to commit our changes into source control.
And let's go and take a look at Source control because we're currently working inside our inventory
branch.
So I'm going to stage all of these changes for our inventory.
And then I'm going to give it a commit message of inventory completes.
And I'm going to commit.
And I'm going to publish this branch to GitHub as inventory.
So when we publish this branch, no workflow is going to kick off because we're not publishing it to
our main branch.
It's going to get published to a branch called inventory.
So I'm going to use that option.
And off that goes up to GitHub.
And then we'll take a look at GitHub and see what we need to do to create a pull request and then merge
what we've done with our main branch.
So that that then kicks off the workflow and updates our published application.
So let's head across to GitHub now and take a look at what's happened.
So now we've got our new branch that's been published.
And we can see the banner here Inventory had recent pushes 45 seconds ago or whatever it is in your
case, of course.
And then we've got the option to compare and pull request.
So our goal is to merge this change into our main branch because we know that kicks off the workflow.
So let's take a look at doing just that.
So I'll click this button.
And then we can open a pull request by comparing changes across two branches.
So we need to compare this with our main branch.
Because there could be conflicts.
There won't be because I'm the only person that's been working on this.
So there shouldn't be a conflict unless I've done something a bit silly with my git commits, which
wouldn't be the first time it is possible, but there shouldn't be any conflicts with the code that
I've changed here.
So we can add a title.
I'll keep it as inventory complete, and then we can describe the change for whoever is going to approve
this.
And then I'll create the pull request.
So I'll click that button And then GitHub is going to check for the ability to merge and check for any
conflicts.
If there are any conflicts, then they have to be dealt with before we can merge this pull request,
and then we can merge the pull request.
So I'll click that button and I'll confirm the merge.
And this has now been successful and it's closed I can delete the branch but I'm going to keep the branch
present inside there.
But what should have happened now is we've now got a commit into our main branch called inventory complete
and we're on the main branch.
I still have the inventory branch, but what that also means is inside our actions, we have our workflow
triggered.
And this is going to update our published application.
So I'll click on the workflow and see how it gets on.
I'm reasonably confident, although it's been a couple of days since I last looked at this, I'm still
reasonably confident that it should just work because we haven't changed our workflow and it should
build our react application and our.
Net application.
But last time I looked at this it took about five minutes.
So now's a good opportunity to go and grab that tea or coffee, and I'll come back once it has either
finished or failed.
Okay, four minutes and 45 seconds, this time slightly quicker than last time.
And we've got a handy link in our deploy option here, which I can right click on and open in a new
tab, just to double check that the functionality has indeed been deployed to our website.
And we're back in.
I'll just log out of Bob and I don't see the inventory link there, which is fine because I wouldn't
expect two for Bob.
So I'll log in as the admin at test.com with the password and cloud name must be specified in account.
Of course.
We've now deployed our app with some additional settings, so we're going to need to update our Azure
dashboard as well, or our Azure portal because this is coming from Cloudinary.
I forgot we added Cloudinary to our application, so we of course need to update our portal.
So let's go to Azure.
And then we just need to update our environment variables once again of course.
So we'll go to our app service and we'll go to our settings and our environment variables.
And we're going to need to add the three clouds and everything's inside here.
So inside the app settings I'm just going to click add.
And then we need to specify Cloudinary.
And really we're better off going to our app settings dot JSON here.
And then copying and pasting them in one by one into Azure.
So we've done this before, and I don't want to keep coming back and blurring out the API secrets inside
here.
So I'll just demonstrate the first one and cloudinary double underscore cloud name.
That should be.
And it will be easy to make mistakes at this stage of the course with what we're doing here.
I think I see more questions from students at this stage with deployment than anything else.
I think tiredness and weariness comes into it.
So this is the part you're most likely to make mistakes in.
So anyway, what we need is cloudinary double underscore cloud name.
I'll apply that one and then I'll add another one.
And this is going to be Cloudinary double underscore API key.
And I'll just paste in the value for that one and click apply.
And finally we need our cloudinary double underscore and then API secrets.
And I'll just paste that in and click apply.
And then once we've got our three cloudinary values inside here we can click apply again.
And then we can confirm.
And what should happen is this should automatically restart our app.
We'll see.
But that should in itself solve the problem.
And if I go back and I'll just go back to the catalog and it was a bit slower.
So I presume that restarting has taken place.
I'll go to the admin at Test.com.
I'll go to the inventory.
Now we see the inventory.
So just adding those environment variables solves that problem.
We don't need to redeploy our app or do anything like that.
And let's just do a quick test.
I'll just edit one of the products, Angular Boots one again I'll click submit and boom, we have that
in place.
So that's it.
We've now got our inventory deployed.
Marvelous.
Now what's coming up next is a challenge.
An optional challenge is a big challenge, but it is optional.
Following that will be the end of course summary because we've done the work now.
So if you're not feeling ready for a big old challenge, come back to it whenever you feel like it.
But that's what's coming up next.
Following that will be the end, of course.
Summary.