it-swarm.com.de

Wie versende ich Flash-Nachrichten in Express 4.0?

Meine Webanwendung erfordert daher eine Authentifizierung und ich habe eine Anmeldeseite, auf der ich eine Fehlermeldung anzeigen möchte, wenn die Person versucht, sich mit einer E-Mail anzumelden, die sich bereits in der Datenbank befindet. Ich versuche dies mit diesem Code auf der HTML-Seite zu tun:

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

Und das mache ich auf meinen Strecken:

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

Ich habe versucht, die Konfiguration mit etwas in etwa wie folgt einzurichten:

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

Aber das gibt mir einen 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) {

Ich bin wirklich verwirrt, weil ich weiß, dass ich Sitzungen brauche, damit Flash funktioniert, aber Sitzungen scheinen nicht für mich zu funktionieren. Ich habe auch versucht, nur Sitzungen und kein Flash zu verwenden, indem ich req.session.messages verwende, aber da ich keine Sitzungen habe, hat dies offensichtlich nicht funktioniert.

Irgendwelche Einsichten? Ich benutze Express 4.0.0 Danke

40
BHendricks

Diese Zusammenfassung sollte Ihre Frage beantworten:

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

in Ihrer Anwendungs-Setup-Datei:

app.use(flash());

Stellen Sie das gleich nach dem Einrichten Ihres Session- und Cookie-Parsers ein. Das ist wirklich alles, was Sie brauchen, um Flash zu verwenden.

Du benutzt:

req.flash('signupMessage', anyValue);

vor der Umleitung zu/Anmeldung richtig?

Hier ist ein lustiger kleiner Leckerbissen, den ich derzeit für eine persönliche Website verwende (in meiner Hauptanwendungsdatei):

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

Jetzt hat jede Ansicht Zugriff auf alle von Ihnen geflashten Fehler- oder Erfolgsmeldungen. Funktioniert gut für mich.

Eine letzte Sache (das ist zwar nicht besonders wichtig, aber Sie können sich ein wenig Wissen aneignen). Wenn Sie wechseln:

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

zu:

<% if (message) { %>

Es funktioniert genauso, aber es schlägt nicht fehl, wenn die Nachricht undefiniert ist. undefinierte und leere Zeichenfolgen werden in Javascript als "falsche" Werte betrachtet.

BEARBEITEN: Mein Cookie/Session/Flash-Setup sieht wie folgt aus:

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

Vielleicht hilft es, wenn Sie Ihren Anwendungs-Setup-Code sehen. Beachten Sie auch, dass die Verwendung von app.configure in Express 4 nicht mehr erforderlich ist.

Letzte Änderung: https://Gist.github.com/raddeus/11061808

Das ist ein funktionierendes Beispiel. Gehe zu localhost: 3000 nachdem du diese App ausgeführt hast und du solltest ['it worked'] auf Ihrem Bildschirm.

75

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

Auch ich war anfänglich durch Flash-Nachrichten in Express 4 verwirrt. Die Verwirrung ergab sich für mich zum Teil aus der Unterscheidung zwischen dem Konzept des Flash-Messaging, einer temporären Nachricht, die für eine Vorlage verfügbar ist, und den verschiedenen Implementierungen des Flash-Messaging, einschließlich express-flash, Andere Module und benutzerdefinierte Middleware.

Um die hervorragende Resonanz von Thad Blankenship weiter oben zu vertiefen, habe ich eine Übersicht für Anfänger erstellt, die zwei Ansätze für Flash-Nachrichten enthält - das Modul express-flash Und benutzerdefinierte Middleware, die in Jade, EJS oder Lenker gerendert wurden.

Die Readme-Datei enthält Details zu den Methoden getter --req.flash(type)-- und setter --req.flash(type, message)--, die durch express-flash Verfügbar gemacht werden, und wie sie sich von der Ausnutzung der res.locals Und req.session Objekte, die durch express-session In der benutzerdefinierten Middleware verfügbar gemacht wurden.

21
Poison Oak

Um die Flash-Nachricht anzuzeigen, müssen Sie das Flash-Modul mit cmd in Ihrem Projekt installieren.

npm install express-session --save

npm install cookie-parser --save

npm install connect-flash --save

Jetzt müssen Sie der Datei app.js Code hinzufügen, um auf diese Module zuzugreifen. Fügen wir diesen Code hinzu.

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

Erzeugen Sie nun eine Flash-Nachricht

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

Verwenden Sie den Code, um die Flash-Nachricht in der Ansichtsdatei anzuzeigen

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

Dies könnte ein alter Post sein, aber ich wurde mir gerade bewusst, dass express-flash-2. Es scheint weniger fehlerhaft mit Express 4 zu sein, scheint alle meine Probleme gelöst zu haben.

npm link

0
tichy255

Nachdem ich zwei Tage lang recherchiert hatte und VIEL aufgeben wollte, habe ich endlich herausgefunden, wie man Connect-Flash benutzt (du brauchst keinen Cookie-Parser) rendert nicht gerne für callbacks ich weiß nicht warum. Schauen Sie sich meinen Code an, um eine visuelle Darstellung zu erhalten.

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