01.05공부

flash message: 템플릿에 사용자에게 메시지를 남길 수 있게 해주는 미들웨어 

session에 근거하기 때문에 한 사용자만 볼 수있다.

 

1.Express Flash 다운 
Express 애플리케이션용 플래시 메시지
npm i express-flash
https://www.npmjs.com/package/express-flash

express-flash

 

server.js 에 

2.import flash from "express-flash";

app.use(flash()); -->session에 연결하여 사용자에게 메세지 보냄 

flash 설치 한 순간부터 req.flash 사용 할 수있음 

 

middleware.js에 

3.사용

export const protectorMiddleware =(req,res,next)=>{  //로그아웃 한 사용자들에게
    if(req.session.loggedIn){
        return  next();
    }else{
            req.flash("error", "Not authorized") -> 메세지 타입과, 내용 입력  messages.locals을 만들어줌
        return res.redirect("/login");
    }
}

 

export const publicOnlyMiddleware = (req,res,next)=>{
    if(!req.session.loggedIn){
        return next();
    }else{
        req.flash("error", "Not authorized")
        return res.redirect("/");
    }
}

다른 콘트롤러

  req.flash("ok","changes saved" );

해당 컨트롤러에 있는 타입과 메세지를 전달함 

이외에도 controller등에서 redirect 전에 사용자에게 메세지를 남기고 싶을 때 사용 할 수있음

지금까지는 생성만했음

locals: 템플릿에서 사용 할 수있는 것들

flash 미들웨어를 설치하면 우리를 위해 message locals를 만들어줌 

그래야 view에서 사용가능 

base.pug

if messages.error

  span=messages.error

if messages.info

  span=messages.info

if messages.ok

  span=messages.ok

 

좋은점:메세지가 한 번 보여지고나면 express가 메세지를 cache에서 지워버림

 

--> /mixin/message.pug파일 생성

mixin message(kind,text)
    div.message(class=kind)
        span=text

 

-->base.pug

include mixins/message

docype html

html~~~~~

body

  if messages.error

   +message("error", messeages.error)

  if messages.info

   +message("info", messages.info)

  if messages.ok

   +message("ok", messages.ok)

 

style.css

@keyframes goAway {

  from {

    transform: none;

    opacity: 1;

  }

  to {

    transform: translateY(-50px);

    opacity: 0;

  }

}

.message {

  position: absolute;

  top: 10px;

  left: 0;

  right: 0;

  margin: 0 auto;

  max-width: 200px;

  padding: 10px 20px;

  border-radius: 10000px;

  text-align: center;

  animation: goAway 0.5s ease-in-out forwards;

  animation-delay: 5s;

  &.error {

    background-color: tomato;

    color: white;

  }

}

---