🕰️ Chapters
- Creating Our Dashboard Page File
- Creating Our Admin Layout
- Setting Up Our Admin Dashboard Route
- Using Our Admin Layout
- Adding Link To Admin Section for Admin Users
- Conditional Logout Redirect Away from Admin Section
- Testing Our Conditional Logout Redirect
Creating An Admin Layout
In this lesson, we'll learn how to create an admin layout we can use throughout our admin section pages. This layout will include a secondary navigation specific to administrative actions.
- Author
- Tom Gobich
- Published
- Jun 06
- Duration
- 7m 14s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Creating An Admin Layout
-
(upbeat music)
-
So earlier in the series, we set up this admin page.
-
It's currently not doing much,
-
it's just returning back a plain text response
-
that we are actually here,
-
and it's protecting this
-
so that only admins can access this page.
-
What we need to do now is add a page for this actual route,
-
and we'll also make a layout specific
-
to all of our administration pages as well.
-
So let's hide this away.
-
We can start by creating our page.
-
So we'll go ahead and right click that, new file.
-
We're gonna create a specific admin directory.
-
So we'll do admin/
-
and we'll call the homepage
-
of our administration section, our dashboard.
-
So let's go ahead and create that there.
-
Now, before we start adding stuff to this page,
-
let's go ahead and create a layout.
-
So we can use what we already have for our app layout.
-
Here's a good starting point.
-
So let's go ahead and dive into there,
-
give everything there a copy.
-
And then we can right click our layout folder,
-
click new file,
-
and we'll add a file called admin.edge
-
and paste everything that we had
-
inside of our index.edge,
-
inside of our admin.edge.
-
Having a completely separate HTML document
-
gives us the full flexibility
-
to be able to add in additional CSS,
-
meta tags, layouts, and the like,
-
as we see fit.
-
So you can do whatever you want
-
to this admin layout,
-
and it will only impact pages
-
that we've applied the admin layout to.
-
For us, I think all that we wanna do
-
is add a specific navigation
-
that'll serve as kind of a secondary navigation
-
specific to our administrative routes.
-
So I'm just gonna do flex align items center
-
and maybe a gap of four.
-
And since all of our main navigation items
-
are text, text, or small,
-
we'll go ahead and keep that here too.
-
We'll do a py of maybe three,
-
and then let's do border wide
-
and a border to the top and bottom.
-
And we'll do border slate,
-
maybe 300 for the color.
-
Then let's go and add in an anchor href.
-
We haven't defined a route specifically for this yet.
-
So I'm gonna leave these empty
-
as we'll do this next.
-
And we'll just have this href be
-
for our dashboard,
-
and we'll add items as we add pages.
-
Okay, let's go and jump into our routes.
-
And okay, it does look like we actually
-
already have a route name for the entire group,
-
as well as our individual index page.
-
I think maybe we just change this name here
-
to our dashboard.
-
We'll keep the path as slash,
-
but we do wanna get rid
-
of the individual route handler.
-
And inside of our app controllers directory,
-
we'll create a separate directory
-
just like we did for auth for our admin controllers.
-
So we can jump into our terminal,
-
stop our server, clear that out,
-
node ace make controller.
-
We'll prefix the actual controller
-
that we wanna create with admin slash,
-
which will create our admin directory
-
and then the controller inside of there.
-
And we'll call this our dashboard controller.
-
Let's go and do hyphen s
-
just to keep that name singular.
-
And we can add a handle method inside of it.
-
Go and create that.
-
And there we go.
-
While we're here, let's go and boot
-
our application back up.
-
So npm run dev, and we can hide that back away.
-
All right, now for our controller,
-
for our dashboard route,
-
we can use our dashboard controller.
-
Hit tab to auto import that
-
and use the handle method.
-
Give that a save the format.
-
And one option that you always have
-
with these controllers is you can rename the import.
-
So for example, if we wanted this
-
to specifically be our admin dashboard controller,
-
we could change that.
-
So we could scroll on up
-
to where we have that import.
-
And that looks like it's right here.
-
So these files are just exported default.
-
So we can name them whatever.
-
So we can prefix this with admin dashboard controller.
-
So that if we were to have a dashboard controller
-
anywhere else inside of our application,
-
we wouldn't have a naming collision.
-
And this also specifically specifies
-
that this controller is for our admin section.
-
So let's go jump inside of that controller.
-
So we'll go in the admin dashboard controller.
-
Right now we just need our view
-
and we'll just return view,
-
render our pages, admin dashboard page.
-
Then we can jump back into our admin layout
-
and finish our thought with our route definition.
-
So we can do route and point this to admin dot
-
and we renamed it index to dashboard.
-
And now we need to actually apply this layout
-
into our dashboard page.
-
And since we placed this
-
inside of our components layout directory,
-
we can do @layout.
-
And you can see the auto-completes coming up
-
to reference our access to this as admin there.
-
And then we can go ahead and end that.
-
And let's just add an H1 of dashboard in.
-
Give that a save.
-
And let's go see what that looks like
-
currently in our browser.
-
So we can come back into here,
-
give it a refresh since that was just a plain text response.
-
And cool.
-
So we can still see this top level navigation
-
for our main application routes,
-
but now we have access to the secondary navigation
-
for our admin based routes.
-
Next, what we want to do
-
is be able to give our admins access
-
to the admin section whenever they're logged in,
-
probably somewhere right over here.
-
So we can hide our browser back away
-
and this will take place within our partials navigation.
-
Let's add this right before our logout button.
-
So we'll want to do an @if auth.user.roleid equals,
-
and then we can make use of our roles enum
-
to check and see whether or not our user
-
is just a plain user or an administrator.
-
In order to actually access this roles enum though,
-
we need to make it accessible within EdgeJS.
-
So let's scroll on down to our start directory here
-
and we'll want to double check inside of our globals.ts
-
where we're registering our EdgeJS globals
-
to see whether or not we're currently adding our roles
-
as a global, which we are not.
-
So let's go ahead and do that.
-
So we can do edge global,
-
and we'll give this enum the exact same name
-
that we would access it with outside of EdgeJS,
-
which is our roles.
-
And then we can just import the roles
-
and provide that in as the value.
-
This enables us now inside of our navigation
-
to do roles.admin to check and see
-
whether or not our authenticated user's role is admin.
-
If it is, then we can display the admin section link,
-
otherwise we'll leave it out.
-
So do a href route admin.dashboard
-
and class text extra small
-
and point them to the admin section.
-
Cool, so now if we jump back into our browser,
-
we should have this nice link right here
-
to our admin section, give that a click,
-
and we jump into our dashboard.
-
If we were to log out,
-
it will attempt to redirect us back to our admin section
-
after we've logged out,
-
and it will state that we're no longer authorized
-
to perform this action
-
since we are no longer authenticated
-
and don't have access to the admin section.
-
What would be ideal is if we did a check for that
-
on log out to make sure that we weren't trying
-
to redirect the user back to a protected route.
-
So within our log out controller,
-
what response redirect back is doing
-
is just checking the refer,
-
and it will return the user back to the refer
-
from the headers.
-
So we can do if,
-
and we'll wanna access our request object,
-
so request, and do request.header
-
and reach for our refer.
-
And AdonisJS does support both the spelling
-
as it's defined in the spec
-
and the spelling as it's defined with the word.
-
So you can do either one there,
-
and you can also specify a default value
-
if one's not provided.
-
So we'll just ensure that we get back some form of a string
-
by providing a string as a default value.
-
So we can do dot,
-
and we can just check for the inclusion
-
of slash admin to some extent.
-
And if that's found,
-
then instead of returning the user back,
-
we can just return response redirect to a specific route.
-
And that might be our homepage
-
or it might be the login page.
-
So we can do auth, login,
-
show to redirect them back to the login page.
-
You could also avert this altogether
-
by just always returning back to the login page as well.
-
But let's go give that a test real quick.
-
So let's give that a save,
-
jump back into our browser,
-
go to our login,
-
let's log in with our test admin user.
-
So that's [email protected],
-
some password, there we go.
-
Let's go into our admin section
-
and now let's try to log out.
-
And there we go.
-
So now we're no longer redirected back
-
to an unauthorized access error,
-
but instead to our login page.
-
Furthermore, if we now log in with test,
-
plus I think Tom is another one that we created,
-
dot test.com, type in the password, there we go.
-
We no longer have an admin link up here
-
because this user is not an administrator.
-
And we can also check to make sure
-
that we cannot access the admin section,
-
which we can not.
-
Awesome.
-
So everything there seems okie dokie.
-
Let's go ahead and log out,
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!