How to control the navigation bar using routes?

Question

I have navbar in my layout.hbs:

<div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href={{sign}}>{{issign}}</a></li> <li><a href={{los}}>{{islog}}</a></li> <li><a href="/">Home</a></li> </ul> </div> 

I want to change the contents in the path, for example, when the user is logged in, I want to change the login text, and also redirect to another page. I do this through routes.

 router.get('/', function(req, res, next) { var vm = { title: 'Join Fatty-cruxifinier', sign: 'about', issign : 'SIGNUP', islog: 'LOGIN', los: 'login' }; res.render('signup', vm); }); router.post('/', function(req, res, next) { userServices.addUser(req.body, function(err){ if(err){ var vm = { title: 'Create an account', input: req.body, error: err }; delete vm.input.password; return res.render('signup', vm); } res.redirect('/'); }); }); 

Although this works, I need to add the variables islog , issign , los and sign to every webpage I have.

Is there a better way to do this?

Answer 1

You can also use res.locals . Everything in res.locals will be available in the context of Handlebars when compiling the template. So you can create some middleware like this:

 app.use((req, res, next) => { // get user from cookie, database, etc. res.locals.user = user; next(); }); 

If you put this middleware in front of other routes, a custom object will be available for each response.

Then, in your Handlebars template, you simply use the conditional expression:

 {{#if user}} <a href=/logout>Logout</a> {{else}} <a href=/login>Login</a> {{/if}} 

Here is an example of live code using similar middleware: https://github.com/digitallinguistics/dlx-org/blob/master/lib/users.js#L38

And here is an example of the Handlebars template that uses this middleware: https://github.com/digitallinguistics/dlx-org/blob/master/views/layouts/main.hbs#L47

You can see that I even display the username in the navigation bar.

Answer 2

You can catch all routers and run loggedin logic before each answer.

 var _ = require('lodash'); var parameters = {}; function isLoggedin(req, res, next) { // check is the user is logged in res.user = { // userdata }; next(); } // catch all the get routes app.get(/^(.*)$/, isLoggedin, function(req, res, next){ if (res.user) { var _parameters = { title: 'Join Fatty-cruxifinier', sign: 'about', issign : 'SIGNUP', islog: 'LOGIN', los: 'login' }; } else { var _parameters = { title: 'Join Fatty-cruxifinier', sign: 'about', issign : 'SIGNUP', islog: 'LOGIN', los: 'login' }; } parameters = _.extend(parameters, _parameters); next(); }); app.get('/account', function(req, res, next){ res.render('signup', parameters); }); 

Answer 3

I did this in my project, you can use a similar approach: -

Js

 var cookieuser = req.cookies.userId || ''; res.render('index', { ID : cookieuser, data : jsonresponse.entries }); 

Ejs

  <ul class="dropdown-menu"> <% if(ID.length<=0) { %> <li><a href="/Login">Login</a></li> <% }else{ %> <li><a href="/Logout">Logout</a></li> <li><a href="/History">History</a></li> <% } %> 

What is it, it stores userId as a cookie that node reads and passes to the html header. The EJS header checks if the Id is empty if it does not mean that the user is logged in. Basically conditional addition of elements li.