- Using Session Variables to Customize Content 6:33
- Adding a Log Out Route 2:00
- Review: Custom Content 3 questions
- Understanding Express Middleware 3:31
- Writing Custom Middleware 5:48
- Writing More Middleware 3:27
- Using MongoDB as a Session Store 4:48
- Next Steps 3:42
- Review: User Authentication With Express and Mongo 5 questions
Preview
Video Player
00:00
00:00
Using Session Variables to Customize Content
6:33Learn how to use session variables to provide custom information for your site's users. Using session variables, you can identify and particular user and provide information tailored to their needs.
[SOUND] At this point,
we've added the most important
0:00
aspects of a user authentication
system to our project.
0:04
The user can sign up on the site, log in,
and visit pages that only they can view.
0:09
In this section of the course
we'll refine our application.
0:15
First we'll add logic to
our template files so
0:18
they display different information
based on a user's logon status.
0:20
We'll also add a log out feature so
a user can safely log out without
0:24
fear that someone might jump on
their computer and impersonate them.
0:28
I'll also show you how to write custom
middleware to add two simple methods
0:32
that'll let you control routes based
on whether a user is logged in or not.
0:36
And finally, I'll show you how to use
MongoDB to create a production ready
0:41
session storage system, one that can
handle thousands of simultaneous users.
0:44
Let's get started.
0:49
Our app currently creates
a session whenever a user logs in.
0:52
That session contains a user ID which
identifies a valid user in our system.
0:56
That's a really useful
piece of information.
1:01
We know that visitors who
haven't logged in won't
1:03
have a session ID with a user ID property,
and those who are logged in will.
1:06
With that basic distinction,
we can customize our app for each group.
1:11
For example,
1:15
we can show different content on pages
based on a visitor's logged in status.
1:16
In particular, we can change the Log
in button here, to say Log out for
1:21
users who've already logged in.
1:25
In addition, if you're logged in you
won't need this sign up link either.
1:28
So we can easily hide that.
1:32
Let me show you what our navigation
will look like once we're done.
1:34
Notice the Sign up and Log in buttons.
1:38
I'll log in and notice the change.
1:40
There's no Sign up button anymore,
and now it says Log out.
1:44
In fact clicking the Log out button now
leads to a different route, /logout.
1:48
And because we're logged
out the Sign up button and
1:53
the Log in button have returned.
1:56
Since the pug templating language
supports basic programming logic
1:58
we can easily add that
customization to our templates.
2:02
The first thing I need to do however
is make the session's user id value
2:06
available to our entire application.
2:10
To do that, I'll add some
programming to our main app.JS file.
2:13
Just below the spot where
I've added sessions,
2:18
I'll add another level of middleware.
2:22
This will make the user ID
available to our templates.
2:28
I'm typing res.locals.currentUser
= req.session.userId.
2:38
And then I called the next
piece of middleware.
2:44
The response object has
a property called locals.
2:47
locals provides a way for you to add
information to the response object.
2:51
Think of it as stuffing a custom
variable into the response.
2:56
In Express all of your views have
access to the response's locals object.
3:00
Here we store the user's ID
into a current user property.
3:05
Remember that req stands for
3:09
the request object and
res stands for the response object.
3:12
Sessions are attached
to the request object.
3:17
So we retrieve the user ID by accessing
the session on the request object.
3:20
If the user is logged in,
3:25
res.locals.currentUser will
hold the number, their user ID.
3:26
However if the visitor is not logged
in there will be no session and
3:33
no session ID.
3:36
So the value of current
user will be undefined.
3:37
Now all of the application's views
can access this current user value.
3:40
So I'm gonna save this file and then we'll
add a bit of logic to the navigation bar.
3:45
The navigation view is in
the Views folder in the navbar.
3:50
pug file.
3:54
I'll add a simple line of logic
3:55
to only show the Sign Up button
to those who are not logged in.
3:58
I'll add a blank line just above
the sign-up button column and
4:02
type if not currentUser.
4:06
In other words if there is not a value for
the current user property, for example,
4:09
it's undefined,
then show the code that follows.
4:13
Pug provides a very concise
way to write HTML markup.
4:17
But you need to pay attention
when adding logic like this.
4:21
Pug looks at indentation to
understand how the logic flows.
4:24
So I need to indent the line
directly below the if statement.
4:28
The Sign Up link.
4:32
If I don't then all of the other
buttons will also be hidden.
4:33
We can use if else logic to toggle
between a log out and login button.
4:38
I'll start by checking to see
if there is a currentUser value.
4:42
If so I'll add a div and a little image
4:46
and a button that takes these
into a slash log-out route.
5:02
Otherwise will show the Log in button
that leads to the /log in route.
5:12
We can see how this works by saving
this file and starting up the server.
5:20
I'll jump into my terminal,
and type Nodemon started up.
5:24
Then I'll visit local host 3000.
5:31
There is the Sign Up Link,
and the Log in button.
5:33
I'll log in and check it out.
5:37
The Sign up button's gone,
and now it says Log out.
5:42
I'll click it.
5:46
Hm, it doesn't work.
5:47
That's because it's leading to the /logout
route which we haven't yet created.
5:49
We'll do that in the next video.
5:54
But before we do that, take a minute to
imagine other ways you could customize
5:57
your applications by adding
logic to template files.
6:01
For example,
6:04
say you stored the date a user last
logged into the site in your database.
6:05
When the user logs back in you could
check the date of their last visit and
6:10
then let them know what's been added
to the site since they last visited or
6:13
you could add bonus content on pages
information that only logged in users
6:17
could see like discounts on your services
or import messages about their accounts.
6:21
Really the sky's the limit.
6:26
What would you wanna to add
to your own applications?
6:28
Give it some thought and
I'll see you in the next video.
6:30