如何使用 express 和 connect-flash 在不刷新页面的情况下显示 flash 消息？答案

【问题标题】：How do I display flash message without page refresh using express and connect-flash?如何使用 express 和 connect-flash 在不刷新页面的情况下显示 flash 消息？
【发布时间】：2015-05-12 05:26:33
【问题描述】：

Express connect-flash 仅在刷新后显示。 为了便于阅读，去掉了代码。

"express": "~4.2.0",
"connect-flash": "~0.1.1",

这是我的app.js

var express = require('express'),
    favicon = require('serve-favicon'),
    flash = require('connect-flash');
var app = express();
app.use(cookieParser('---'));
app.use(session({
  secret: '---',
  saveUninitialized: true,
  resave: true}));
app.use(flash());

app.use(function(req, res, next) {
  res.locals.messages = req.flash();
  next();
});

在我的路线中，我尝试了类似

req.flash('success', {msg: 'Sign Up Success'});
res.redirect('/me/dashboard');

我的错误显示msg.jade模板是

for msg in messages
      div #{msg.msg}

我只有在刷新/重定向后才会收到消息。请让我知道我做错了什么。

我也看过this，但我认为它已经过时了

【问题讨论】：

你调试过 res.locals.messages = req.flash();线？注意 req.flash() 返回一个对象，而不是一个数组
您希望何时收到消息，flash 应该可用于要呈现的下一页。如果您需要在帖子或其他内容后立即发出通知，则需要在前端进行。
在第二个代码 sn-p 中，我正在设置 flash 消息并重定向到另一个页面。这行得通吗？
@muzk 我认为这不是问题，因为我会在下次刷新时收到消息。我错过了什么吗？
@rajeshujade 在我的路线中，我尝试了类似req.flash('success', {msg: 'Sign Up Success'}); res.redirect('/me/dashboard');

标签： node.js express connect-flash

【解决方案1】：

您正在中间件中调用 flash 方法，这是中间件的预期行为。中间件将在下一次请求时读取消息并根据您的逻辑设置它的局部变量。

中间件是如何工作的？

当一个请求进来时，它被传递给第一个中间件函数，连同一个包装的 ServerResponse 对象和一个下一个回调。中间件可以通过调用响应对象上的方法来决定响应，和/或通过调用方法 next() 将请求传递到堆栈中的下一层。

连接闪存

flash 是会话的一个特殊区域，用于存储消息。消息写入闪存并在显示给用户后清除。 flash 通常与重定向结合使用，以确保消息可用于要呈现的下一页。

我只有在刷新/重定向后才收到消息？

app.use(function(req, res, next) {
    res.locals.messages = req.flash();
    next();
});

上述中间件将调用每个请求并设置req.flash() 值。因此，您将在每个下一个（后续）请求中获得 req.flash('success', {msg: 'Sign Up Success'}); 值。如果不重定向/刷新页面，则不会出现在当前页面上。

要覆盖此行为以在不刷新的情况下获取值，您已调用 req.flash() 函数，该函数可用于使用 res.locals.messages = req.flash(); 在路由器中的闪存消息。

例如：- 在没有刷新页面的情况下在页面上显示失败的登录消息，在路由器中设置新的 flash 消息后在成功重定向页面上显示失败的登录消息。

router.post("/login", function (req, res) {
    var username = req.body.username;
    var pwd = req.body.pwd;
    if (username === "demo" && pwd === "demo") {
        req.flash("messages", { "success" : "Sign Up Success" });
        res.redirect("/me/dashboard");
    } else {
        req.flash("messages", { "error" : "Invalid username or password" });
        res.locals.messages = req.flash();
        res.render("login', { title: 'Login"});
    }
});

结论：在同一页面上获取消息。通过在路由器本身中分配值来覆盖中间件的行为。

【讨论】：