클라이언트가 웹사이트를 이용하다 요청 처리결과를 모르거나 알수없는 오류를 마주쳐서 당황하는것을 방지하기위해
미리 적어놓은 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 시간설정
}
}));
connectFlash는 session 다음에 추가해줘야한다.
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>
자바스크립트는 객체를 진짜 좋아하는거같다. 객체변태인가?
'프로그래밍 > nodeJS' 카테고리의 다른 글
HTML 유효성 검증 취약점 (0) | 2020.12.04 |
---|---|
bcrypt를 사용한 비밀번호 암호화 (2) | 2020.11.22 |
ejs와 레이아웃(express template) (2) | 2020.10.20 |
미들웨어 구조와 기본 미들웨어 세팅 (2) | 2020.10.18 |
(express+ nodeJS) CR"UD"작업의 필수 패키지 -> method-override (4) | 2020.10.15 |