Wie manipuliere ich die Navigationsleiste mit Routen?

Question

Ich habe eine navbar in meinem 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> 

Ich mag den Inhalt auf dem Sprung ändern, zum Beispiel, wenn der Benutzer in angemeldet, ich mag den Login-Text ändern, um die Abmeldung und auch umleiten auf eine andere Seite. Ich mache das über Routen.

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

Obwohl dies scheint zu funktionieren, muss ich die islog, hinzuzufügen issign, los und sign Variablen zu jedem und jeder Webseite die ich habe.

Gibt es einen besseren Weg, dies zu tun?

Answer 1

Sie können alle Router abfangen und die eingeloggte Logik vor jeder Antwort ausführen.

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

Ich tat dies in meinem Projekt, können Sie einen ähnlichen Ansatz verwenden: -

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

Was das bedeutet ist speichert es userId als Cookie, was n Ode liest und übergibt Header HTML. Der EJS-Header überprüft, ob die ID leer ist, wenn dies nicht bedeutet, dass der Benutzer angemeldet ist.

Answer 3

Sie können auch res.locals verwenden. Alles in res.locals wird im Kontext Lenker verfügbar sein, wenn die Vorlage kompiliert wird. Sie könnten also einige Middleware wie diese machen:

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

Wenn Sie diese Middleware, bevor Sie andere Routen setzen, wird das Benutzerobjekt dann auf jede Antwort zur Verfügung.

Dann in Ihrem Lenker Schablone, die Sie einfach eine bedingte verwenden:

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

Hier ist ein Beispiel für Live-Code unter Verwendung ähnlicher Middleware: https://github.com/digitallinguistics/dlx-org/blob/master/lib/users.js#L38

Und hier ist ein Beispiel für eine Vorlage Lenker, der diese Middleware verwendet : https://github.com/digitallinguistics/dlx-org/blob/master/views/layouts/main.hbs#L47

Sie können sehen, dass ich sogar den Benutzernamen in der Navigationsleiste anzeigen.