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

Posted 2021-03-30

所以我的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谢谢

答案

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

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

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

app.use(flash());

在设置会话和cookie解析器之后立即放置。这真的是你需要使用闪存。

您正在使用：

req.flash('signupMessage', anyValue);

在重定向到/注册之前对吗？

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

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) { %>

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

编辑：我的cookie /会话/闪存设置如下：

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']。

另一答案

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

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

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

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

另一答案

要显示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>
<% } %>

另一答案

经过两天研究并想放弃A LOT我终于找到了如何使用connect-flash（你不需要cookie解析器）一些主要的东西使用（返回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>

Login.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 %>

Signup.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 %>

另一答案

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

npm link