Отправка данных в модальный без перенаправления в nodejs

Question

Я использую passport and flash для управления аутентификацией. Я хочу отправить флэш-сообщения обратно в пользовательский интерфейс в документации. В моем случае в пользовательском интерфейсе я использую модальность так делает

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

не будет работать, потому что вы можете сделать только на обновление страницы. Поэтому, как я могу отправить данные флэш-памяти любому другому виду данных на мою страницу, когда по какой-то причине не удается войти в систему. Независимо от данных флэш-памяти, в частности, я не могу понять, как визуализировать данные модальным с помощью выражения.

routes.js

ниже res.render никогда не происходит на неудачной аутентификации.

//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 (где мой модальное)

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

Я понимаю, мне нужно использовать JavaScript/Ajax для предотвращения пост за то перенаправлять, но Я не могу понять, как получить данные вспышки до этого момента:

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 добавил код из 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

Таким образом, после совсем немного копать я нашел решение , Ключ был в распознавании jquery not express - это ответ, позволяющий клиенту обрабатывать перенаправления и сообщения/получать. У меня есть только обновления для локальной стратегии входа в систему, но они будут применяться и для ваших социальных/социальных социальных профилей.

Изменения в passport.js (второстепенный)

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

Изменения моего маршрута (часть I) боролся с

Ключевые вещи, чтобы отметить здесь я решаю, какие данные Я отправил через res.send. Я мог бы отправить что-нибудь, в этом случае информация - это то, что исходит от passport.js («Bad Password»). Если я счастлив и могу войти в систему, я отправляю просто мало действительный: true 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); 
    }); 

Изменение в мой index.js

Добавлен ДИВ на вершине моего модальное отображать сообщения, удалять старую <% = сообщения> часть и удалить действие и метод из формы JQuery будет сделай это для нас.(Включен код полный модальный быть прозрачным)

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

Затем я добавил следующий Jquery код последней кусок головоломки:

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

Надежда это помогает кому-то, информация для полного конечного решения о том, как сделать это скуднее.