In this section of the course, we want to set up some protected routes for admin users only.
So right now I'm not logged in.
So I have this logging link up here, which takes me to this page.
And if I do log in,
if I set a password three last time, let's find out.
Yes, I now get this change to a log out link and I can see the virtual terminal.
But of course, there's more things we want to do with our fictitious widget sales website.
We want to be able to look at people who have bought things.
We want to be able to look at people who subscribe to our bronze plan.
And we want to be able to offer refunds when necessary.
And of course, to do that, we only want authenticated users to do it.
So we're going to make some changes to our code this time right now.
This log in or log out and this virtual terminal over here, there are only visible and accessible based
upon the presence of a token stored in local storage.
And we can make that much better.
So let's go to our coat and let's look first of all, at base level over here, base layout go up at
the very bottom of this.
We have this ad event listener and these two variables to determine whether or not something is visible,
those log in, log out and the virtual terminal.
And I'm not going to use those anymore.
So I'm going to delete that code entirely.
And instead I'm going to take advantage of something that's available to every page of our site.
So if we go back to rendered Orrego, which is in the CMD Web package, we have this template data structure.
And one of the things that's passed to every single page is this value.
This field is authenticated, which is an input.
So I'm going to assume that if that's set to zero, the user is not authenticated and if it's set to
one, the user is authenticated.
And of course, we can make that determination really easily.
Let's scroll down to where we add the default data right here.
So this is run before any page on the site is rendered.
And all we have to do is check to see if the value of idea exists in the session.
So we say if after a session
exists and we give it the context and we have that because we have the request available to us in this
function or that context, and we're looking for user uppercase, i.
D If that exists, then we'll say TRD dot is authenticated equals one, otherwise it's going to be set
to zero by default.
But if you want to be really secure, really feel good about yourself, you can always put Elz.
CDR is authenticated equal zero.
OK, so there it is now that's going to be available to us when we render things, including base layer.
So I just deleted that JavaScript.
I still want to log out function obviously.
But up here in the menu we can make some determinations to the start with this part right here.
We can make that a lot simpler simply by putting a check and saying if this is authenticated, aitutaki
and that was misspelled, that one, if that equals one, then we're going to show something else and
we'll show something else and we'll just have this over and removed none because we don't want it to
be hidden.
And I'll copy this whole thing, because that's going to be what people see if they're not authenticated
and pasted in right here.
And I'll just change this one to Laura and change the URL to logo.
And now if someone's authenticated the C logo and if someone's not authenticated, they see log in.
And that's exactly what I want.
And of course, we still have this virtual terminal thing.
What we can do up here is say finding something that's a dropdown.
So this, for example, this is a dropdown.
And what I'll do is put an admin menu that's only available to authenticated users right here, right
beside the product's virtual terminal will go away in a minute.
So we'll create one for products.
So I'll copy this entire thing.
That's a dropdown just as a starting point.
Coffee, then I'll come down here, a live virtual terminal there for the moment and I'll do that check
again.
If Equal Dot is authenticated one, then they're going to see what's inside this if statement, otherwise
or not.
So I'll paste in that dropdown as a starting point and we'll change this to admin.
And we want the admin user to have access to certain things.
For example, we want this.
We want a virtual terminal.
So I'll copy virtual terminal over here, change this to virtual terminal
and fix the URL, which is slash admin, slash virtual dash terminal.
OK, so there's the first thing we're going to want other things as well.
So what I'm going to do just to make it a little more visually attractive is I'll put another Elyon
here and we'll give it an hour with a class of dropdown divider, which comes straight from bootstrap
and close the line.
And let's assume that another thing we're going to want to be able to do is to look at all sales.
This would be sales of individual widgets, OK?
And I'll put in a path that doesn't exist yet, slash admin, slash all dash sales, for example, and
I'll duplicate that and say all subscriptions
or subscriptions.
OK, and then maybe just because I can, I'll put the divider here again and give them another way of
logging out so they don't have to go way over to the right hand side of the screen.
And I'll just copy this one pasted in here and call it logout.
So they have two ways of looking at nothing wrong with that.
And the password for the path for that is just log out.
So let's open our terminal and make stock make start.
Let's see what it looks like, so me go back to my Web browser and refresh this page and it still says
log out here as it should, and I have this drop down menu and I should be able to get to the virtual
terminal from here as perfect.
And I can also log out from here.
OK, so the next step is to go create some pages, some Stubbe pages, handlers, routes and so forth
for these two new items, for all sales and all subscriptions.
And of course, we're going to build the front end pages using our front end logic and our front end
application.
And we'll do all of the backend things such as fetching the list of all sales, getting an individual
sale, refunding a sale.
We'll do that by calling the backend from our front end and we'll get started on that in the next lecture.