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

时间:2014-04-18 19:18:07

标签: javascript node.js flash session express

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

7 个答案:

答案 0 :(得分:72)

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

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

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

app.use(flash());

在设置会话和cookie解析器之后立即执行此操作。这就是你应该使用flash的全部内容。

您正在使用:

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

答案 1 :(得分:19)

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

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

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

自述文件包含有关getter的详细信息 - req.flash(type) - 和setter - req.flash(type, message) - express-flash公开的方法以及它们与{{1自定义中间件中由res.locals公开的{}和req.session个对象。

答案 2 :(得分: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>
<% } %>

答案 3 :(得分:0)

经过两天的研究并想放弃很多东西,我终于找到了如何使用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 %>

答案 4 :(得分:0)

这可能是个老职位,但我刚意识到express-flash-2。 Express 4似乎没什么问题,似乎可以解决我所有的问题。

npm link

答案 5 :(得分:0)

在我的情况下,如果我将消息显示部分放在另一个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>
<% } %>

答案 6 :(得分:0)

易于使用但没有维护的“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>