如何在 Express 4.0 中发送 Flash 消息？

Posted 2023-03-03

【中文标题】如何在 Express 4.0 中发送 Flash 消息？

【英文标题】：How to send flash messages in Express 4.0?

【发布时间】：2014-06-03 08:29:57

【问题描述】：

所以我的 Web 应用程序需要身份验证，并且我有一个注册页面，如果此人尝试使用数据库中已有的电子邮件进行注册，我想向他们显示一条错误消息。我正在尝试在 html 端使用此代码：

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

在我的路线中这样做：

router.get('/signup', function(req, res) 
  res.render('/signup',  message: req.flash('signupMessage') );
);

我尝试使用以下内容设置配置：

app.configure(function() 
 app.use(express.session( secret : 'keyboard cat' )); 
);

但这给了我一个 TypeError：

 12:11:38 web.1  | app.configure(function() 
 12:11:38 web.1  |     ^
 12:11:38 web.1  | TypeError: Object function (req, res, next) 

我真的很困惑，因为我知道我需要会话才能让 Flash 正常工作，但会话似乎对我不起作用。我也尝试过使用 req.session.messages 只使用会话而不使用 flash，但由于我没有会话工作，这显然不起作用。

有什么见解吗？ 我正在使用 Express 4.0.0 谢谢

【参考方案1】：

这个要点应该回答你的问题：

https://gist.github.com/raddeus/11061808

在您的应用程序设置文件中：

app.use(flash());

在设置会话和 cookie 解析器后立即添加。这就是您使用 flash 所需的全部内容。

您正在使用：

req.flash('signupMessage', anyValue);

在重定向到 /signup 之前对吗？

这是我目前用于个人网站的一个有趣的小花絮（在我的主应用程序文件中）：

app.use(function(req, res, next)
    res.locals.success_messages = req.flash('success_messages');
    res.locals.error_messages = req.flash('error_messages');
    next();
);

现在每个视图都可以访问您闪现的任何错误或成功消息。很适合我。

最后一件事（这很挑剔，但您可能会获得一些知识）。如果你改变：

<% if (message.length > 0)  %>

到：

<% if (message)  %>

如果消息未定义，它将以相同的方式工作，但不会失败。 undefined 和空字符串在 javascript 中都被认为是“假”值。

编辑：我的 cookie/session/flash 设置如下：

app.use(cookieParser('secretString'));
app.use(session(cookie:  maxAge: 60000 ));
app.use(flash());

也许查看您的应用程序设置代码会有所帮助。另请注意，在 Express 4 中不再需要使用 app.configure。

最终编辑：https://gist.github.com/raddeus/11061808

这是一个有效的例子。运行该应用程序后转到 localhost:3000，您应该会在屏幕上看到 ['it worked']。

【讨论】：

但是我的会话和 cookie 解析器设置给了我错误，是的，我正在使用该调用重定向到 /signup

所以我只是添加了这些行而不是我的配置，我现在回到错误错误：大多数中间件（如 cookieParser）不再与 Express 捆绑，必须单独安装。请参阅github.com/senchalabs/connect#middleware。

@BHendricks 然后将var cookieParser = require('cookie-parser'); 添加到文件顶部。并运行npm install --save cookie-parser

我已经做到了，但仍然得到同样的错误：/

@BHendricks 我添加了一个完整的工作要点。确保在运行之前使用 npm 安装依赖项。请注意，它不会通过 http 响应，但应将 flash 消息记录到您的控制台。

【参考方案2】：

https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423

我最初也对 Express 4 中的 Flash 消息感到困惑。对我来说，这种困惑部分源于 Flash 消息的概念（模板可用的临时消息）与 Flash 消息的各种实现之间的区别，后者包括express-flash、其他模块和自定义中间件。

只是为了扩展上述 Thad Blankenship 的出色响应，我为初学者创建了一个 Gist，其中包括两种 Flash 消息的方法——express-flash 模块和自定义中间件——以玉、ejs 或把手呈现。

自述文件包含有关express-flash 公开的getter--req.flash(type)--和setter--req.flash(type, message)--方法的详细信息，以及它们与利用res.locals 和req.session 公开的对象有何不同express-session 在自定义中间件中。

【讨论】：

祝福你的心。

【参考方案3】：

要显示 flash 消息，您必须使用 cmd 在项目中安装 flash 模块。

npm install express-session --save

npm install cookie-parser --save

npm install connect-flash --save

现在您必须在 app.js 文件中添加一些代码才能访问这些模块。让我们添加这些代码。

var session = require('express-session');

var cookieParser = require('cookie-parser');

var flash = require('connect-flash');

var app = express();

app.use(cookieParser('secret'));

app.use(session(cookie:  maxAge: 60000 ));

app.use(flash());

现在生成flash消息

req.flash('success', 'Registration successfully');
res.locals.message = req.flash();

要在视图文件中显示 Flash 消息，请使用代码

<% if(locals.message) %>
    <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> <%=message.success%>
    </div>
<%  %>

【讨论】：

我想知道我们如何确保前端知道它是success 消息还是error

【参考方案4】：

在研究了两天并想放弃很多之后，我终于找到了如何使用 connect-flash（你不需要 cookie-parser）一些主要的东西使用（返回 res.redirect）而不是 res .render 它不喜欢为回调渲染我不知道为什么。看看我的代码以获得视觉效果。

app.js

var express                 = require("express"),
    bodyParser              = require("body-parser"),
    mongoose                = require("mongoose"),
    passport                = require("passport"),
    LocalStratagy           = require("passport-local"),
    User                    = require("./user"),
    passportLocalMongoose   = require("passport-local-mongoose"),
    flash                   = require('connect-flash'),
    app                     = express();
    //using express-session
app.use(require("express-session")(
    secret:"The milk would do that",
    resave: false,
    saveUninitialized: false
));
app.use(flash());

app.use(function(req, res, next)
    res.locals.message = req.flash();
    next();
);


//connectiong to a specific database
    mongoose.connect("mongodb://localhost/LoginApp");


    //so body-parser works
app.use(bodyParser.urlencoded(extended: true));

//making it so express uses the public dir
app.use(express.static("public"));

//setting the view engine to ejs
app.set("view engine", "ejs");


// so passport works
app.use(passport.initialize());
app.use(passport.session());

//authenticated data from the login form
passport.use(new LocalStratagy(User.authenticate()));

//reading the data and encoding it
passport.serializeUser(User.serializeUser());

//reading the data and unencoding it
passport.deserializeUser(User.deserializeUser());


//ROUTES
app.get("/", function(req, res)
    res.render("index");
);


// AUTH ROUTES

//show login
app.get("/login", function(req, res)
    req.flash("error", "")
    res.render("Login");
);

//handle login form data
app.post("/login", passport.authenticate("local",
    failureRedirect: "/login",
    failureFlash: true,
) ,function(req, res)
    req.flash("success", "Logged in");
    return res.redirect("/");
);

//Show signup form
app.get("/signup", function(req, res)
    res.render("Signup");
);

//handle signup form data
app.post("/signup", function(req, res)
    User.register(new User(username: req.body.username), req.body.password, function(err, user)
        if(err)
            req.flash("error", err.message);
            return res.redirect("/signup");
        
        passport.authenticate("local")(req, res, function()
            req.flash("success", "successfuly Signed up");
            return res.redirect("/");
        );
    );
);



app.listen(3000, function()
    console.log("server started");
);

Header.ejs

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Fully responsive project with a backend">
        <link rel="stylesheet" href="main.css">
        <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
        <!-- animated css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        <title>wire frame chal</title>
    </head>
    <body>

        <h1><%= message.error %></h1>
        <h1><%= message.success %></h1>

登录.ejs

   <% include ../partials/header %>
<form method="POST" action="/login">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <button>Submit</button>
</form>


<% include ../partials/footer %>

注册.ejs

  <% include ../partials/header %>

<form method="POST" action="/signup">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <button>Submit</button>
</form>


<% include ../partials/footer %>

【参考方案5】：

这可能是一个老帖子，但我刚刚意识到express-flash-2。 Express 4 的问题似乎更少，似乎解决了我所有的问题。

npm link

【参考方案6】：

在我的情况下，如果我将消息显示部分放在另一个 EJS 文件中并将其导入我的布局中，我会得到成功和错误，因为寻呼机刚刚加载，所以最初都没有任何文本显示

_message.ejs

<% if(success_msg)  %>
    <div class="alert alert-success">
        <%= success_msg %>
    </div>
<%  %>

<% if(error_msg)  %>
    <div class="alert alert-danger">
        <%= error_msg %>
    </div>
<%  %>

【参考方案7】：

易于使用但未维护的“express-flash-messages”包对我有用。在此处查看代码：https://github.com/s2t2/express-app-prep-2021/pull/1/files

应用配置：

var session = require('express-session')
var flash = require('express-flash-messages')

var SESSION_SECRET = process.env.SESSION_SECRET || "super secret"

app.use(session(
  cookie:  maxAge: 60000,
  secret: SESSION_SECRET,
  name: 'stocks-app-session',
  resave: true,
  saveUninitialized: true
));
app.use(flash()) 

路线：

req.flash("danger", "OOPS, Please check your inputs and try again.")

这里使用 Bootstrap 样式：

    <!--
        FLASH MESSAGES
        https://github.com/visionmedia/express-messages#rendering-messages
    -->
    <div class="flash-container">
       <% const messages = getMessages() %>

       <% if (messages)  %>
            <% Object.entries(messages).forEach((obj) =>  %>
                <% var category = obj[0] %>
                <% var message = obj[1] %>
                <!--
                    BOOTSTRAP ALERTS
                    https://getbootstrap.com/docs/5.0/components/alerts/#dismissing
                -->
                <div class="alert alert-<%= category %> alert-dismissible fade show" role="alert" style="margin-bottom:0;">
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    <%= message %>
                </div>
            <% ) %>
       <%  %>
    </div>