Question

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

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

无法工作，因为您只能在页面刷新时进行渲染。因此，当出于某种原因无法登录时，如何将Flash数据或任何其他类型的数据发送到我的页面。无论特别是闪存数据，我都无法弄清楚如何使用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（我的模态是）

＆＃13;

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

＆＃13;

我的理解是我需要使用javascript / ajax来阻止帖子进行重定向，但我无法弄清楚如何获取flash数据：

index.ejs（javascript）

＆＃13;

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

＆＃13;

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不表达是答案，让客户端处理重定向和发布/获取。我只包含本地登录策略的更新，但它们也适用于您的注册/社交其他社交个人资料。

对passport.js（次要）的更改

def apartment_params
  params.require(:apartment).permit(:name, :address, :website, amenities_attributes: [:id, :name])
end

改变我的路线（我努力的部分）

这里需要注意的关键是我决定通过res.send发送哪些数据。我可以发送任何东西，在这种情况下，信息来自passport.js（＆＃39; Bad Password＆＃39;）。如果我很高兴并且能够登录，我发送一个简单的小有效：真正的json。

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

对index.js的更改

在我的模态顶部添加了一个div来显示消息，删除旧的＆lt;％= message＆gt;从表单中删除动作和方法jQuery将为我们做到这一点。（包括透明的完整模态代码）

＆＃13;

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

＆＃13;

然后我在拼图中添加了以下Jquery代码：

＆＃13;

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

＆＃13;

希望这对某人有所帮助，关于如何做到这一点的完整终端解决方案的信息很少。

将数据发送到模态而不在nodejs

1 个答案: