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

IT技术 javascript node.js express session
2021-02-27 10:13:12

因此,我的 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 谢谢

6个回答

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

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

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

app.use(flash());

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

您正在使用:

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']在屏幕上看到

我已经这样做了,但仍然得到同样的错误:/
2021-04-23 10:13:12
@BHendricks 然后添加var cookieParser = require('cookie-parser');到文件的顶部。并运行npm install --save cookie-parser
2021-05-01 10:13:12
@BHendricks 我添加了一个完整的工作要点。确保在运行之前使用 npm 安装依赖项。请注意,它不会通过 http 响应,但应将 flash 消息记录到您的控制台。
2021-05-03 10:13:12
但是我的会话和 cookie 解析器设置给了我错误,是的,我正在使用该调用重定向到 /signup
2021-05-04 10:13:12
所以我只是添加了这些行而不是我的配置,现在我回到错误错误:大多数中间件(如 cookieParser)不再与 Express 捆绑在一起,必须单独安装。请参阅github.com/senchalabs/connect#middleware
2021-05-15 10:13:12

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

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

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

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

祝福你的心。
2021-05-05 10:13:12

要显示 flash 消息,您必须使用 cmd 在您的项目中安装 flash module。

npm install express-session --save

npm install cookie-parser --save

npm install connect-flash --save

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

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
2021-04-16 10:13:12

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

应用程序.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");
});

头文件.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 %>

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

npm 链接