[NodeJS] Connect-flash를 이용한 알림 메시지

어플리케이션에 적용

공식 페이지의 사용법과 같이 'failureFlash: true'를 추가한다.

 

app.post('/auth/login_process', passport.authenticate('local', 
    {
        failureRedirect: '/auth/login',
        failureFlash: true
    }), 
    function(req, res){
    req.session.save(function(){
        console.log('session save...');
        res.redirect('/');
    })
})

 

 

 

문제점

나는 session에 id값이 저장되지 않아서, successRedirect를 사용하지 않았다. 그리고 이 문제는 flash message가 session에 저장되지 않는 문제로 이어졌다. 즉, 로그인에 실패했을 때 메시지를 session에 추가해야하기 때문에 failureRedirect도 사용하면 안된다.

 

해결방법

 

app.post('/auth/login_process', function (req, res, next) {
    passport.authenticate('local', function (err, user, info) {
        console.log('info', info);
        if (err) {
            return next(err);
        }
        if (!user) {
            req.session.save(function () {
                res.redirect('/auth/login');
            });
            return;
        }
        req.logIn(user, function (err) {
            if (err) { return next(err); }
            req.session.save(function () {
                res.redirect('/');
            });
        });
    })(req, res, next);
});

login_process를 custom callback을 사용하도록 변경한다. 

공식사이트의 custom callback

 

console.log(info)를 확인해보면, 로그인에 실패했을 때, message가 출력된다.

 

app.post('/auth/login_process', function (req, res, next) {
    passport.authenticate('local', function (err, user, info) {
        if (err) {
            return next(err);
        }
        if (!user) {
            req.session.save(function () {
                console.log('info', info.message);
                req.flash('message', info.message);
                return req.session.save(function () {
                    res.redirect('/auth/login');
                });
            });
        }
        req.logIn(user, function (err) {
            if (err) { return next(err); }
            req.session.save(function () {
                res.redirect('/');
                return;
            });
        });
    })(req, res, next);
});

이를 반영하여 직접 flash message를 넣어준다.

로그인 실패시 flash에 message가 들어가는 것을 확인할 수 있다.

 

• serializeUser

passport.serializeUser(function (user, done) {
    
    if(user){
        done(null, user.email);
    }
});

serializeUser도 위와같이 수정해준다. 이유는 잘 모르겠지만, 로그인을 실패해도 호출이 된다.

 

flash message 표시

router.get('/login', (req, res) => {
    db.query('SELECT * FROM topic', function (error, topics) {
        if (error) throw error;
        var fmsg = req.flash();
        var message='';
        if(fmsg.message){
            message=fmsg.message;
        }
        var title = 'Login';
        var description = '';
        var list = template.list(topics);
                var html = template.html(title, list, `<h2>${title}</h2>
                <p>
                    ${message}
                </p>
                <form action="/auth/login_process" method='POST'>
                    <p>
                        <input type="text" name="email" placeholder="email">
                    </p>
                    <p>
                        <input type="password" name="pwd" placeholder="password">
                    </p>
                    <input type="submit" value="로그인">
                </form>${description}`, ``);
        res.send(html);
    });
});

request에 message가 있으면, message를 출력하도록 한다. 이렇게하면 로그인에 실패했을 때 왜 틀렸는지를 메시지로 표시해주고, 다시 새로고침을 하면 메시지가 사라진다.

 

id가 틀렸을 때

 

pwd가 틀렸을 때