<-->
본문 바로가기

프로그래밍/nodeJS

flashMessage(connect-flash 패키지)

반응형

클라이언트가 웹사이트를 이용하다 요청 처리결과를 모르거나 알수없는 오류를 마주쳐서 당황하는것을 방지하기위해 

미리 적어놓은 flashMessage로 요청 처리 결과나 에러를 띄워 줄 수있다. ex) "회원가입 완료" or "로그인 실패"

 

flashMessage는 서버가 세션에 메시지를 저장한뒤 쿠키 데이터 형식으로

view(브라우저)에 응답해주는 방법으로 전해진다.  

 

flashMessage를 사용하기 위해서는 우선 세션을 미들웨어에 추가해줘야한다.

 

 

Session

 

npm i express-session -S

 

const expressSession = require("express-session");

app.use(expressSession({ //이제 cookie-parser를 사용하지않아도 얘혼자서 parse함
	secret: "secret_passcode", 
    cookie: { //session의 ID값 저장
       	maxAge: //expire 시간설정
    }
 }));

 

connectFlashsession 다음에 추가해줘야한다.

 

npm i connect-flash -S

const expressSession = require("express-session"),
connectFlash = require("connect-flash");

app.use(expressSession({ //이제 cookie-parser를 추가하지않아도 session미들웨어가 직접 parse 함
	secret: "secret_passcode", 
    cookie: {
       	maxAge: 400000//expire 시간설정
    }
 }));
 app.use(connectFlash()); //요거

 

다음은 커스텀 미들웨어(매 요청마다 실행)을 추가해서

req.flash("key","message")의 결과가 res.locals.flashMessages에 대입되게 한다.

app.use((req,res,next)=> { //매 요청마다 실행
	res.locals.flashMessages = req.flash();
    next(); //next 없으면 무한루프 돔
})

 

controller에서 req.flash()를 사용해서 라우터마다 원하는 메시지를 지정해놓는다.

index: (req, res, next) => {
    User.find()
      .then((user) => {
        res.locals.users = user;
        req.flash("success","성공메시지"); //res.locals.flashMessages.success= "성공메시지"
        res.locals.redirect = "/users"; //redirect를 해야지 flash메시지가 view에 표시된다.
        next();
      })
      .catch((error) => {
        console.log(error);
        next(error);
      });
  },
  
  redirectView: (req,res,next)=>{
  	let path = res.locals.redirect;
    if(path){
    	res.redirect(path);
    }else {
    	next();
    }
  }

 

이제 view에서 flashMessages객체를 전달받아 보여주기만하면된다.

<div>
    <% if(flashMessages) { %>
        <% if(flashMessages.success){ %>
            <h2><%= flashMessages.success %></h2>
        <% } else if(flashMessages.error) { %>
            <h2><%= flashMessages.error %> </h2>
        <% } %>
    <% } %>
</div>

 

 

자바스크립트는 객체를 진짜 좋아하는거같다. 객체변태인가?