Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There's lots of great Express middleware to choose from — we've used body parser and express-session in this project. But you don't need to rely on other programmers for middleware. You can write your own, and in this video, you'll learn how.
The loggedOut( ) middleware function
function loggedOut(req, res, next) {
if (req.session && req.session.userId) {
return res.redirect('/profile');
}
return next();
}
Using the middleware in a route
// GET /login
router.get('/login', mid.loggedOut, function(req, res, next) {
return res.render('login', { title: 'Log In'});
});
We've included various third party
middleware in our application like
0:00
Body Parser and Express Sessions.
0:04
The cool thing is you don't need to
just rely on someone else to create
0:06
the functionality your application needs.
0:09
You can write your own
middleware to extend Express and
0:12
in this,
in the next video we'll do just that.
0:15
We'll create two pieces of middleware.
0:18
One that will present an error
to users who aren't logged in.
0:20
This will let us easily password protect
any page on our site with a simple call to
0:24
the middleware.
0:29
The second middleware function will be for
users who are logged in but
0:30
are visiting pages that aren't for them
like the register page, the logon form or
0:33
perhaps some promotional marketing
page targeted to just new visitors.
0:38
In this video,
we'll tackle that last function first.
0:42
Currently the /login route is
a form that's visible to anyone,
0:44
including logged in people.
0:50
See, I'm logged in now and if I go
to /login, I can see the form again.
0:53
The same is true for the sign up form.
0:58
While this isn't a huge deal, it would
be nice to only let non logged in users
1:03
see that form and simply redirect logged
in users who accidentally visit this
1:07
page to somewhere more appropriate
like their profile page.
1:12
We can do that with our
own custom middleware.
1:16
In my text editor, I'll open the project.
1:19
It's common to keep your middleware code
outside of the main application in one or
1:22
more separate JavaScript files.
1:27
I'll create a directory named middleware.
1:29
And in it, I'll add a file named index.js.
1:37
I'll add all my middleware code here.
1:42
I'm gonna call this function logged out.
1:45
It will prevent logged in
users from accessing a route.
1:49
Middleware functions have access to
the three parameters we've discussed,
1:53
the request object,
the response object and the next function.
1:59
The session middleware makes a session
object available through the request
2:04
object.
2:09
So in this function, we can check for
a session and a user ID value.
2:10
If both of these are true that means
the user is logged in to the site.
2:21
And if the user is logged in,
we'll send them to their profile page.
2:26
In other words, we can call this
middleware on any route that we don't want
2:34
an authorized user to see
like a marketing page.
2:39
However, if the user is not logged in,
2:42
we just pass execution to the next
piece of middleware by calling next.
2:45
In other words, if the visitor is not
logged in this function won't do anything.
2:50
Now in order to use this middleware in
our application we have to export it.
2:55
So at the bottom of this file,
We export the function.
3:00
Because this is router middleware,
we need to require it and
3:07
use it in the file defining our routes.
3:11
I'll open the index .js file
inside the route’s directory.
3:13
And then I'll require our middleware,
Because this
3:19
route's file is in the route’s directory,
I need to use dot dot slash to move up and
3:24
out of the route folder,
then identify the middleware folder.
3:30
Requiring a directory by name
like this tells Express to load
3:34
the index.js file in that directory.
3:38
Now to add our middleware,
we pass it into a route.
3:41
You can do so
by referencing it with mid.logged out.
3:45
First, let's only show the registration
form if the visitor is not logged in.
3:49
I’ll addf the middleware inside
the get route for register.
3:54
You'll see that I literally place
this in the middle of the route.
4:05
It really is middleware.
4:10
I'll do the same for
the route that displays the login form.
4:12
Let's see how this works.
4:20
I'll save these files and
switch to my browser.
4:21
I have nodemon running, so
the changes I made are active.
4:24
I'm not currently logged in,
so I'll do that first.
4:27
Then, I'll go to /login.
4:33
This normally displays the log in form but
not for me.
4:37
It directs me, a logged in user,
to my profile.
4:39
You can see the same is true
if I visit the register route.
4:43
See how easy it was to use our middleware?
4:49
Just plop it down in a route and
it runs when that route is called.
4:51
In the next video we'll create
a more useful piece of middleware.
4:55
I'll call it requires login.
4:58
It will determine if the user
is logged in by checking for
5:01
a session with a user ID property.
5:04
If they are logged in, then they just
continue on to the next piece of
5:06
middleware and eventually to wherever that
route leads like the user profile page.
5:10
However, if the user isn't logged in,
5:15
it will spit out an error saying that the
user must be logged in to view the page.
5:17
And I've already shown you the basics
you need to write and use middleware.
5:21
Before you watch the next video,
I recommend that you try to create
5:26
the requires login middleware
function yourself.
5:30
Add the code to the index.js file
inside the middleware folder.
5:33
Then use that middleware in the GET
request for the /profile route.
5:37
See if you can do it.
5:42
If not, no worries.
5:43
I'll show you how to do
it in the next video.
5:45
See you there.
5:47
You need to sign up for Treehouse in order to download course files.
Sign up