Question

I am using passport to login my users. When a user logs into my app, the username will be displayed in the header.

This is my header.jade:

div#header_content
input(type='text',name='search',id='globle_search')
span#user_status
    if(req.isAuthenticated())
        a(class='user_menu_btn',href='home', target='_blank' )  req.user.username
        a(class='user_menu_btn',href='logout') Logout
    else
        a(id='login_btn',href='login',class='user_status_btn') login

If I run the app, I get an error that says:

 ReferenceError: F:\shopping\views\includes\header.jade:4
 req is not defined

This is my index route:

app.get('/',index.index);

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

How do I maintain the login status in the header?

Answer 1

To access req within the view, it has to be member of the locals object passed to the view engine — which it won’t be by default.

// before: app.use(app.router);
app.use(function (req, res, next) {
    res.locals.req = req;
    next();
});

Though, since user and isAuthenticated are the what you need from req, you can just attach them directly:

// before: app.use(app.router);
app.use(function (req, res, next) {
    res.locals({
        get user() { // as a getter to delay retrieval until `res.render()`
            return req.user;
        },

        isAuthenticated: function () {
            return req.user != null;
        }
    })

    next();
});

if isAuthenticated()
    // ...
    a(...) #{user.username}
else
    // ...

See res.locals and app.locals for more info.