web-dev-qa-db-ja.com

Express 4.0でフラッシュメッセージを送信する方法

したがって、私の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) {

フラッシュが機能するためにセッションが必要であることがわかっているので、本当に混乱していますが、セッションは私のために機能していないようです。また、req.session.messagesを使用して、セッションのみを使用し、フラッシュは使用しませんでしたが、セッションが動作しないため、これは明らかに機能しませんでした。

洞察はありますか？ Express 4.0.0を使用しています

javascriptnode.jsflashsessionexpress
40
BHendricks

この要点はあなたの質問に答えるべきです：

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

アプリケーションのセットアップファイルで：

app.use(flash());

セッションとCookieパーサーをセットアップした直後にそれを配置します。フラッシュを使用するのに必要なのはこれだけです。

あなたが使用しています：

req.flash('signupMessage', anyValue);

/ signup rightにリダイレクトする前に？

以下は、個人用サイト（メインアプリケーションファイル内）で現在使用している楽しい小さな情報です。

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

これで、すべてのビューが、フラッシュしたエラーまたは成功メッセージにアクセスできるようになります。私にとってはうまくいきます。

最後に1つ（これはきちんとした方法ですが、ある程度の知識を得ることができます）。変更する場合：

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

に：

<% if (message) { %>

同じように機能しますが、メッセージが未定義の場合は失敗しません。未定義の文字列と空の文字列は、どちらもJavaScriptの「偽の」値と見なされます。

編集：私のクッキー/セッション/フラッシュのセットアップは次のようになります：

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']画面に。

75
Thad Blankenship

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

私も最初はExpress 4のフラッシュメッセージで混乱していました。私にとっての混乱は、フラッシュメッセージングの概念、テンプレートで使用可能な一時メッセージ、およびexpress-flashを含むフラッシュメッセージングのさまざまな実装の違いから生じました。他のモジュール、およびカスタムミドルウェア。

上記のThad Blankenshipからの優れた対応を拡張するために、フラッシュメッセージへの2つのアプローチ（express-flashモジュールとカスタムミドルウェア）を含む初心者向けのGistを作成しました。

Readmeには、express-flashによって公開されているゲッター-req.flash(type)-およびsetter-req.flash(type, message)-メソッドと、res.localsで公開されているreq.sessionおよびexpress-sessionオブジェクトの活用との違いに関する詳細が含まれていますカスタムミドルウェア。

21
Poison Oak

フラッシュメッセージを表示するには、cmdを使用してプロジェクトにフラッシュモジュールをインストールする必要があります。

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

フラッシュメッセージを生成する

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

ビューファイルにフラッシュメッセージを表示するには、コードを使用します

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

これは古い投稿の人かもしれませんが、私はexpress-flash-2。 Express 4のバグは少ないように見えますが、私の問題はすべて解決したようです。

npmリンク

0
tichy255

2日間調査した後、多くのことをあきらめたいと思いましたコールバックのレンダリングが好きではない理由はわかりません。私のコードを見て、ビジュアルを取得してください。

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