web-dev-qa-db-fra.com

Comment envoyer des messages flash dans Express 4.0?

Donc, mon application Web nécessite une authentification et j'ai une page d'inscription où, si la personne tente de s'inscrire avec un email déjà dans la base de données, je souhaite lui montrer un message d'erreur. J'essaie de faire cela en utilisant ce code sur le côté html:

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

Et cela dans mes itinéraires:

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

J'ai essayé de configurer la configuration avec quelque chose comme:

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

Mais cela me donne un 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) {

Je suis vraiment perplexe, car je sais que j'ai besoin de sessions qui fonctionnent pour que Flash fonctionne, mais les sessions ne semblent pas fonctionner pour moi. J'ai également essayé d'utiliser uniquement des sessions et pas de flash, en utilisant req.session.messages, mais comme je n'ai pas de session de travail, cela ne fonctionne évidemment pas.

Des idées? J'utilise Express 4.0.0 Merci

javascriptnode.jsflashsessionexpress
40
BHendricks

Ce Gist devrait répondre à votre question:

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

dans le fichier d'installation de votre application:

app.use(flash());

Mettez cela juste après avoir configuré votre session et votre analyseur de cookie. C'est tout ce dont vous avez besoin pour utiliser le flash.

Vous utilisez:

req.flash('signupMessage', anyValue);

avant de rediriger vers/inscription à droite?

Voici un petit article amusant que j'utilise actuellement pour un site personnel (dans mon fichier d'application principal):

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

Désormais, chaque vue aura accès aux messages d'erreur ou de succès que vous avez clignotés. Fonctionne bien pour moi.

Une dernière chose (c'est nitpicky mais vous pouvez acquérir des connaissances). Si vous changez:

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

à:

<% if (message) { %>

Cela fonctionnera de la même manière mais n'échouera pas si le message n'est pas défini. les chaînes non définies et vides sont toutes deux considérées comme des valeurs "fausses" en javascript.

EDIT: Ma configuration cookie/session/flash se déroule comme suit:

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

Peut-être que voir le code de configuration de votre application pourrait vous aider. Notez également que l'utilisation de app.configure n'est plus nécessaire dans Express 4.

Dernière édition: https://Gist.github.com/raddeus/11061808

C'est un exemple de travail. Allez à localhost: 3000 après avoir exécuté cette application et vous devriez voir ['it worked'] sur votre écran.

75
Thad Blankenship

https://Gist.github.com/brianmacarthur/a4e3e0093d368aa8e42

Moi aussi, j'avais initialement été troublé par les messages flash dans Express 4. La confusion pour moi résultait en partie de la distinction entre le concept de messagerie flash, un message temporaire disponible pour un modèle et les diverses implémentations de la messagerie flash, qui incluent _express-flash_, d’autres modules et du middleware personnalisé.

Juste pour développer l'excellente réponse de Thad Blankenship ci-dessus, j'ai créé un Gist pour débutant qui comprend deux approches pour les messages flash: le module _express-flash_ et le middleware personnalisé: rendu en jade, ejs ou guidon.

Le fichier lisez-moi contient des informations détaillées sur les méthodes getter --req.flash(type)-- et setter --req.flash(type, message)-- exposées par _express-flash_ et sur la manière dont elles diffèrent de l'exploitation de la _res.locals_ et _req.session_ objets exposés par _express-session_ dans le middleware personnalisé.

21
Poison Oak

Pour afficher un message flash, vous devez installer le module flash dans votre projet à l'aide de cmd.

npm install express-session --save

npm install cookie-parser --save

npm install connect-flash --save

Maintenant, vous devez ajouter du code au fichier app.js pour accéder à ces modules. Ajoutons ce code.

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());

Maintenant générer un message flash

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

Pour afficher le message flash dans le fichier de visualisation, utilisez le code

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

C’est peut-être un vieux post, mais je viens de prendre conscience de express-flash-2. Il semble être moins bogué avec Express 4 semble avoir résolu tous mes problèmes.

lien npm

0
tichy255

Après avoir recherché pendant deux jours et voulu abandonner BEAUCOUP, j'ai enfin découvert comment utiliser connect-flash (vous n'avez pas besoin de cookie-analyseur), mais quelques éléments principaux sont utilisés (retournez res.redirect) au lieu de res.render n'aime pas le rendu des rappels, je ne sais pas pourquoi. Regardez mon code pour obtenir un visuel.

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 %>
0
Immersful Flame