Jak manipulować tabliczką nawigacyjną za pomocą tras?

Question

Mam navbar w moich 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> 

chcę zmienić zawartość w podróży, na przykład, gdy użytkownik się zalogować, chcę zmienić tekst logowania się wylogować, a także przekierować na inną stronę. Robię to przez trasy.

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('/'); 
}); 
}); 

Choć to wydaje się działać, muszę dodać islog, issign, los i sign zmiennych do każdej stronie mam.

Czy jest lepszy sposób to zrobić?

Answer 1

Możesz przechwycić wszystkie routery i uruchomić logikę logowania przed każdą odpowiedzią.

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 2

Zrobiłem to w moim projekcie, można użyć podobnego podejścia: -

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> 
      <% } %> 

Co to robi to , przechowuje ID użytkownika jako plik cookie, który n Od czyta i przekazuje do nagłówka html. Nagłówek EJS sprawdza, czy identyfikator jest pusty, jeśli nie oznacza, że ​​użytkownik jest zalogowany. Zasadniczo warunkowo dodaje elementy li.

Answer 3

Można również użyć res.locals. Wszystko, co znajdziesz w res.locals, będzie dostępne w kontekście kierownicy podczas kompilacji szablonu. Więc można zrobić trochę middleware takiego:

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

Jeśli umieścisz ten middleware przed swoimi innymi drogami, obiekt użytkownika będzie wtedy dostępna do każdej odpowiedzi.

Następnie w kierownicy szablon po prostu użyć warunkowa:

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

Oto przykład kodu żywo stosując podobną middleware: https://github.com/digitallinguistics/dlx-org/blob/master/lib/users.js#L38

A oto przykład szablonu Kierownice że używa tego middleware : https://github.com/digitallinguistics/dlx-org/blob/master/views/layouts/main.hbs#L47

Możesz zobaczyć, że nawet wyświetlam nazwę użytkownika na pasku nawigacji.