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.

Created by: @tomgobich
Published: 1 year ago

🕰️ Chapters
00:00 - Creating Our Dashboard Page File
00:40 - Creating Our Admin Layout
01:48 - Setting Up Our Admin Dashboard Route
03:29 - Using Our Admin Layout
03:59 - Adding Link To Admin Section for Admin Users
05:28 - Conditional Logout Redirect Away from Admin Section
06:32 - Testing Our Conditional Logout Redirect

Join the Discussion 0 comments

Be the first to comment!

Transcript

(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 test@test.com, 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, Log in again with test@test.com, and now we're ready to move on.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.