CODEWITHSUNDEEP
node.jsexpresspage-refreshflash-messageconnect-flash
Random.x
Random.x

Reputation: 13

Nodejs Flash messages only loads after the page is refreshed (connect-flash)

I'm getting stuck with connect-flash , all flash messages doesn't load on the page unless I refresh for a couple of times I'm not sure why.

I created a small project just to test connect-flash and it's the same result, please check the code below:

App.js code: 

const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const session = require('express-session');
const flash = require('connect-flash');
const app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
 secret: 'keyboard cat',
 resave: false,
 saveUninitialized: true
}));
//using flash
app.use(flash());
app.use(function(req, res, next){
 res.locals.success = req.flash('success');
 res.locals.error = req.flash('error');
 next();
});
//flash route
app.get('/flash', (req, res) =>{
 req.flash("success", "CONNECT FLASH TEST");
 res.render('flash');
});
const port = process.env.PORT || 5000;
app.listen(port, () =>{
 console.log(`App has started on port ${port}`);
})

Here's the code for the flash.hbs page to render the flash message: 

<h1>Flash page</h1>
{‌{#if success}}
<h2>{‌{success}}</h2>
{‌{/if}}

Thanks so much in advanced, any help would be highly appreciated guys.

Upvotes: 1

Views: 1795

Answers (2)

MalcolmOcean
MalcolmOcean

Reputation: 2985

I was halfway through rolling my own new version of req.flash, when I was looking through the docs of express-session and came across this gem:

Note Since version 1.5.0, the cookie-parser middleware no longer needs to be used for this module to work. This module now directly reads and writes cookies on req/res. Using cookie-parser may result in issues if the secret is not the same between this module and cookie-parser.

And lo, I had these lines:

app.use(require('cookie-parser')())
const session = require('express-session')
const MongoStore = require('connect-mongo')(session)
app.use(session({
  secret: process.env.SESSION_STORE_SECRET,
  store: new MongoStore({mongooseConnection: mongoose.connection}),
  maxAge: 10*365*24*60*60*1000, // set to 10 years
  resave: false,
  saveUninitialized: false
}))

Once I changed the cookie-parser line to:

app.use(require('cookie-parser')(process.env.SESSION_STORE_SECRET))`

it worked exactly as expected!

(For some people, the answer will be to remove cookie-parser altogether.)

Upvotes: 0

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

Do they render after just one refresh? That's how they are supposed to work.

"Flash messages" are used to carry a message over to the next request, and most of the time the only reason is the post-request-get pattern. If you just want to show a message to the user on the same page, while not doing a redirect, you don't need a library for it. Just pass the message to the template as data.

Upvotes: 2

Related Questions