javascript - 将数据发送到模态而不在nodejs中重定向

Question

我正在使用 passport and flash管理身份验证。我想根据文档将闪存消息发送回 UI。在我的 UI 场景中，我使用的是模态，所以执行

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

将不起作用，因为您只能在页面刷新时呈现。因此，当由于某种原因无法登录时，如何将闪存数据或任何其他类型的数据发送到我的页面。无论具体的闪存数据如何，我都无法弄清楚如何使用 express 将数据渲染到模态。

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) {
                }
            });
        });
    });

编辑从 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');
})

改变我的路线(我遇到困难的部分)

这里要注意的关键是我正在决定我通过 res.send 发送的数据。我可以发送任何东西，在这种情况下，信息来自 passport.js(“错误密码”)。如果我很高兴并且能够登录，我会发送一个简单的小 valid: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 的更改

在 my modal 顶部添加了一个 div 来显示消息，删除旧的 <%= message > 部分并从表单中删除操作和方法 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>

然后我在拼图的最后一 block 添加了以下 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);
                }
            });
        });
    });

希望这对某人有所帮助，有关如何执行此操作的完整端到端解决方案的信息很少。