Conditionally Rendering EJS Template With Res.locals In Express.js

This snippet is to conditionally render navbar items based on whether a user is logged in OR not. So toggle the ‘Login’ button to ‘Logout’ if the user is already logged in and vice versa. I admit it took more time that I had anticipated. Primarily because in the beginning I insisted on using a global variable in express to manage the user’s ‘isAuthenticated’ state so as to pass values to an EJS partial. So I declared and initialized with the keywords ‘global’ and then global.varName = boolean. And then in the routes I changed the value of the ‘isLoggedIn’ global variable to true/false depending on whether the user was logged in or not. Also I was leaving res.locals alone so that others could extend the functionality if need be themselves.

Then I deployed to Heroku and broke the app. So I finally decided to just use res.locals which I had looked at initially. Here it is with


In <strong>app.js</strong>

//sessions
app.use(session({
secret: require("./bin/config").sessionSecret,
resave: false,
saveUninitialized: true,
cookie: {
maxAge: 300000
}
}));

// middleware to make 'user' available to all templates
app.use(function (req, res, next) {
if(req.session.userId !== undefined){
res.locals.loggedIn = req.user;
} else{
res.locals.loggedIn = null;
}
next()
})

In <strong>navbar.ejs</strong>

<nav class="navbar navbar-expand-lg navbar-ligt bg-light"style="height:5%">
<a class="navbar-brand" href="/">TROPICA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<% if (locals.user === null) { %>
<a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/features">Features</a>
<a class="nav-item nav-link" href="/pricing">Pricing</a>
<a class="nav-item nav-link" id="userLogin" href="/users/login">Login</a>

<% } else { %>
<a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/features">Features</a>
<a class="nav-item nav-link" href="/pricing">Pricing</a>
<a class="nav-item nav-link" href="/users/dashboard">Dashboard</a>
<a class="nav-item nav-link" id="userLogin" href="/users/logout">Logout</a>
<% } %>

</div>
</div>
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" id="search-button"type="submit">Search</button>
</form>
</nav>

Leave a Reply Cancel reply