Learn 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
You need to sign up for Treehouse in order to download course files.Sign up