Envoi de données à un modal sans redirection dans nodejs

Question

J'utilise passport and flash pour gérer l'authentification. Je souhaite renvoyer les messages flash à l'interface utilisateur conformément à la documentation. Dans mon scénario dans l'interface utilisateur que je me sers d'un modal, ce faisant un

res.render('login.ejs', { message: req.flash('loginMessage') }); 

ne fonctionnera pas parce que vous ne pouvez rendre sur une actualisation de la page. Par conséquent, comment puis-je envoyer des données flash ou tout autre type de données à ma page lorsque je ne parviens pas à me connecter pour une raison quelconque. Indépendamment des données flash en particulier je ne peux pas comprendre comment rendre les données à un modal avec express.

routes.js

en dessous du res.render ne se produit jamais sur un échec d'authentification.

//Home Page =================================== 
    app.get('/', function(req, res) { 
    res.render('login.ejs', { message: req.flash('loginMessage') }); 
    }); 

    //Login Modal ================================= 
    app.post('/login', passport.authenticate('local-login', { 
    successRedirect : '/profile', 
    failureFlash : true 
    })); 

index.ejs (où mon modal est)

<div id="openModal" class="modalDialog"> 
 
    <div> 
 
    <a href="#close" title="Close" class="close">X</a> 
 
    <h2 id="logintitle">Log In</h2> 
 

 
    <% if (message.length>0) { %> 
 
     <div class="alert alert-danger"> 
 
     <%= message %> 
 
     </div> 
 
     <% } %> 
 

 
     <form class="form-horizontal" action="/login" method="post" id="loginform"> 
 
      <div class="form-group inner-addon left-addon"> 
 
      <label class="sr-only" for="login_email">Email</label> 
 
      <i class="glyphicon glyphicon-user"></i> 
 
      <input type="email" class="form-control" name="email" placeholder="Email Address" /> 
 
      </div> 
 
      <div class="form-group inner-addon left-addon"> 
 
      <label class="sr-only" for="login_pass">Password</label> 
 
      <i class="glyphicon glyphicon-star-empty"></i> 
 
      <input type="password" class="form-control" name="password" placeholder="Password" /> 
 
      </div> 
 
      <div id="forgotpass"> 
 
      <a href="#openModal3" id="forgotpass">Forgot Password?</a> 
 

 
      </div> 
 
      <div class="form-group"> 
 
      <button type="submit" class="btn form-login-button">Log In</button> 
 
      </div> 
 
     </form> 
 
     <div class="strike"> 
 
      <span>Log in with</span> 
 
     </div> 
 

 
     <div id="test" class="test"> 
 

 
      <a href="/auth/facebook" class="btn btn-primary"><span class="fa fa-facebook"></span> Facebook</a> 
 
      <a href="/auth/google" class="btn btn-danger"><span class="fa fa-google-plus"></span> Google</a> 
 

 
     </div> 
 
    </div> 
 
</div>

Je crois comprendre que je dois utiliser javascript/ajax pour empêcher le poste pour être la redirection, Je ne peux pas comprendre comment obtenir les données flash à ce stade:

index.ejs (javascript)

$(function() { 
 
     $("#loginform").on("submit", function(e) { 
 
      e.preventDefault(); 
 
      $.ajax({ 
 
       url: $(this).attr("action"), 
 
       type: 'POST', 
 
       data: $(this).serialize(), 
 
       beforeSend: function() { 
 
       }, 
 
       success: function (data) { 
 
       } 
 
      }); 
 
     }); 
 
    });

EDIT a ajouté un code de passport.js

function passport_login(req, email, password, done) { 
    //doing some validate and found bad password 
    return done(null, false, req.flash('loginMessage', 'Invalid Password')); 
}) 

Answer 1

Ainsi, après un peu de creuser j'ai trouvé la solution . La clé était de reconnaître que jquery n'est pas la réponse, laissant le client gérer les redirections et les messages. Je n'ai inclus que des mises à jour pour une stratégie de connexion locale, mais elles s'appliqueraient également à vos autres profils sociaux d'inscription/sociaux.

Changements à passport.js (mineur)

function passport_login(req, email, password, done) { 
    //doing some validate and found bad password 
    return done(null, false, 'Bad Password'); 
}) 

Changements à mon itinéraire (la partie que je débattais avec)

Les choses importantes à noter ici est que je suis Choix de données J'ai envoyé via res.send. Je pourrais envoyer n'importe quoi, dans ce cas l'information est ce qui vient de passport.js ('Bad Password'). Si je suis heureux et capable de me connecter j'envoie un simple petit valide: vrai json.

//Login Modal ================================= 
    app.get('/localLogin', function(req, res, next) { 
    passport.authenticate('local-login', function(err, user, info) { 
     if (err) { return next(err); } 
     //if there is no user in the response send the info back to modal 
     if (!user) { 
     return res.send(info); 
     } 
     //user was able to login, send true and redirect 
     req.logIn(user, function(err) { 
     if (err) { return next(err); } 
     return res.send({ valid: true }); 
     }); 
    })(req, res, next); 
    }); 

Changements à mes index.js

Ajout d'un div sur le mon modal pour afficher les messages, enlever le vieux <% = message> pièce et supprimer l'action et la méthode de la forme jQuery fais ça pour nous.(Inclus le code modal complet soit transparent)

<div id="openModal" class="modalDialog"> 
 
    <div> 
 
    <a href="#close" title="Close" class="close">X</a> 
 
    <h2 id="logintitle">Log In</h2> 
 
    <div id="loginPopup"></div> 
 
    <form class="form-horizontal" id="loginform"> 
 
     <div class="form-group inner-addon left-addon"> 
 
     <label class="sr-only" for="login_email">Email</label> 
 
     <i class="glyphicon glyphicon-user"></i> 
 
     <input type="email" class="form-control" name="email" placeholder="Email Address" /> 
 
     </div> 
 
     <div class="form-group inner-addon left-addon"> 
 
     <label class="sr-only" for="login_pass">Password</label> 
 
     <i class="glyphicon glyphicon-star-empty"></i> 
 
     <input type="password" class="form-control" name="password" placeholder="Password" /> 
 
     </div> 
 
     <div id="forgotpass"> 
 
     <a href="#openModal3" id="forgotpass">Forgot Password?</a> 
 

 
     </div> 
 
     <div class="form-group"> 
 
     <button type="submit" class="btn form-login-button">Log In</button> 
 
     </div> 
 
    </form> 
 
    <div class="strike"> 
 
     <span>Log in with</span> 
 
    </div> 
 

 
    <div id="test" class="test"> 
 

 
     <a href="/auth/facebook" class="btn btn-primary"><span class="fa fa-facebook"></span> Facebook</a> 
 
     <a href="/auth/google" class="btn btn-danger"><span class="fa fa-google-plus"></span> Google</a> 
 

 
    </div> 
 
    </div> 
 
</div>

Ensuite, j'ajouté le code Jquery suivant la dernière pièce du puzzle:

$(function(){ 
 
     $('#loginform').on('submit', function(e) { 
 
      e.preventDefault(); 
 
      var data = $(this).serialize(); 
 
      $.get('/localLogin', data, function(result) { 
 
       if(result.valid == true) 
 
       { 
 
        window.location.href = '/profile'; 
 
       } 
 
       else 
 
       { 
 
        $('#loginPopup').html(result); 
 
       } 
 
      }); 
 
     }); 
 
    });

Espoir cela aide quelqu'un, l'information pour une solution complète sur la façon dont pour faire c'est rare.