사용자 프로필 수정

로그인 한 사용자에 한해서 프로필을 수정 할 수 있는 페이지를 만든다. 이에 맞는 라우터들과 컨트롤러들을 만들어준 후, 첫째로 템플릿을 만들어준다. 

extends base

block content 
    form(method="POST")
        input(placeholder="이메일",type="email",name="email",required,value=loggedInUser.email)
        input(placeholder="이름",type="text",name="name",required,value=loggedInUser.name)
        input(placeholder="사용자 이름",type="text",name="username",required,value=loggedInUser.username)
        input(placeholder="거주 지역",type="text",name="location",required,value=loggedInUser.location)
        input(type="submit",value="수정하기")

수정한 내용을 백엔드로 보내야하기 때문에 POST를 사용해준다. 우리가 보통 수정할 때, 수정하기 이전의 값이 보이는 것이 편하므로 나도 기본 밸류값에 원래 수정하기 이전의 값들을 보여주고자 했다. 우리는 이미 localsMiddleware로 세션에 저장되어있는 유저의 정보를 res.locals에 저장해두었기 때문에 템플릿에서 접근할 수 있었다. 

 

하지만 문제가 있다. 특정 유저가 로그인 하지 않은 채로 해당 url로 들어오면(프로필 수정 url) loggedIn 은 undefined 가 되어 오류를 발생시킨다. 따라서 로그인 하지 않은 유저는 이 url로 들어올 수 없도록 만들어야 한다. 

이는 미들웨어로 해결 할 수 있다. 특정 컨트롤러가 실행되기 전에 미들웨어가 개입해서 "그 페이지로는 갈 수 없으니 다른데로 연결해드리겠음 ㅇㅇ" 하면 되는 거니까.

따라서 나는 두개의 미들웨어를 만들었다.

1. 로그인 하지 않은 유저가 로그인이 필요한 페이지로 가려할때

로그인이 필요한 페이지는 일단 프로필 수정페이지, 로그아웃 페이지, 비디오 수정페이지, 비디오 생성 페이지가 있다. 

export const protectorMiddleware = (req, res, next) => {
    if (req.session.loggedIn) {
        next();
    } else {
        return res.redirect("/login");
    }
}

유저가 로그인 되어있다면, 다음 컨트롤러를 수행하면 되는거니까 next()를 불러주고, 아니라면 로그인부터 하라고하는 로그인 페이지로 연결해준다. 

 

2. 로그인 되어있는 유저가 로그인하는 페이지로 이동할 때

로그인 하는 페이지(깃허브로 로그인, 카카오로 로그인, 그냥 로그인) 혹은 회원가입 페이지로 가려하면 이를 막고 그냥 홈페이지로 보내주는 미들웨어를 만들었다.

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

코드는 굉장히 단순티비 ㅋ