所以我的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 感谢
答案 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似乎没什么问题,似乎可以解决我所有的问题。
答案 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>