게시판 - 접근제한

이번 강의에서는 로그인을 하지 않았을 경우 글 작성을 할 수 없도록 글쓰기 기능을 제한하고, 자신이 작성한 글이 아닌 경우에는 글의 수정 및 삭제를 제한하며, 마지막으로 자신이 아닌 사용자 정보의 접근을 제한해봅시다.

접근제한은 두가지 단계로 이루어 지는데, 첫번째로 front-end에서의 조건에 맞지 않는 경우 해당 기능들이 보이지 않게하여 아예 접근이 불가능하도록 하고, 다음으로 back-end에서 해당 요청이 오는 경우 사용자를 비교하여 error를 내도록 합니다.

폴더구조

코드 - js

// util.js

var util = {};

util.parseError = function(errors){
 ...
}

util.isLoggedin = function(req, res, next){
  if(req.isAuthenticated()){
    next();
  } 
  else {
    req.flash('errors', {login:'Please login first'});
    res.redirect('/login');
  }
}

util.noPermission = function(req, res){
  req.flash('errors', {login:"You don't have permission"});
  req.logout();
  res.redirect('/login');
}

module.exports = util;

모든 route에서 공용으로 사용될 isLoggedin, noPermission함수를 util.js에 만듭니다.

isLoggedin함수는 사용자가 로그인이 되었는지 아닌지를 판단하여 로그인이 되지 않은 경우 사용자를 에러 메세지("Please login first")와 함께 로그인 페이지로 보내는 함수입니다.

route에서 callback으로 사용될 함수이므로req, res, next를 받습니다. 로그인이 된 상태라면 다음 callback함수를 호출하게 되고, 로그인이 안된 상태라면 로그인 페이지로 redirect합니다.

noPermission함수는 어떠한 route에 접근권한이 없다고 판단된 경우에 호출되어 에러 메세지("You don't have permission")와 함께 로그인 페이지로 보내는 함수입니다.req, res가 있지만 callback으로 사용하지는 않고 일반 함수로 사용할 예정입니다. isLoggedin과 다르게 접근권한이 있는지 없는지를 판단하지는 않는데, 상황에 따라서 판단 방법이 다르기 때문입니다.

// routes/posts.js

...

// New
router.get('/new', util.isLoggedin, function(req, res){ // 2
 ...
});

// create
router.post('/', util.isLoggedin, function(req, res){ // 2
 // ...
});

...

// edit
router.get('/:id/edit', util.isLoggedin, checkPermission, function(req, res){ // 2, 3
 // ...
});

// update
router.put('/:id', util.isLoggedin, checkPermission, function(req, res){ // 2, 3
 // ...
});

// destroy
router.delete('/:id', util.isLoggedin, checkPermission, function(req, res){ // 2, 3
 // ...
});

module.exports = router;

// private functions // 1
function checkPermission(req, res, next){
  Post.findOne({_id:req.params.id}, function(err, post){
    if(err) return res.json(err);
    if(post.author != req.user.id) return util.noPermission(req, res);

    next();
  });
}

1. Post에서checkPermission함수는 해당 게시물에 기록된 author와 로그인된 user.id를 비교해서 같은 경우에만 계속 진행(next())하고, 만약 다르다면 util.noPermission함수를 호출하여 login 화면으로 돌려보냅니다.

2. new, create, edit, update, destroy route에 util.isLoggedin를 사용해서 로그인이 된 경우에만 해당 route을 사용할 수 있습니다.. 즉 게시물 목록(index)을 보는 것과, 게시물 본문을 보는 것(show) 외의 행동은 login이 되어야만 할 수 있습니다.

3. edit, update, destroy route에 checkPermission를 사용해서 본인이 작성한 post인 경우에만 계속 해당 route을 사용할 수 있습니다.

// routes/users.js

...

// Index - ** Index는 지워줍니다 // 1

...

// show
router.get('/:username', util.isLoggedin, checkPermission, function(req, res){ // 3
 ...
});

// edit
router.get("/:username/edit", util.isLoggedin, checkPermission, function(req, res){ // 3
 // ...
});

// update
router.put("/:username", util.isLoggedin, checkPermission, function(req, res, next){ // 3
 // ...
});

// Destroy- ** Destory는 지워줍니다 // 1

module.exports = router;

// private functions // 2
function checkPermission(req, res, next){
 User.findOne({username:req.params.username}, function(err, user){
  if(err) return res.json(err);
  if(user.id != req.user.id) return util.noPermission(req, res);

  next();
 });
}

user의 목록을 보여주는 기능(index)와 user를 삭제하는 기능(destroy)은 더이상 필요하지 않으므로 지워줍시다.

2. User에서checkPermission함수는 해당 user의 id와 로그인된 user.id를 비교해서 같은 경우에만 계속 진행(next())하고, 만약 다르다면 util.noPermission함수를 호출하여 login 화면으로 돌려보냅니다.

3. show, edit, update에util.isLoggedin과 checkPermission를 사용해서 로그인이 되고 자신의 데이터에 접근하는 경우에만 해당 route을 사용할 수 있습니다.

코드 - ejs

<!-- views/posts/index.ejs -->

...

      <div>
        <% if(isAuthenticated){ %> <!-- 1 -->
          <a class="btn btn-primary" href="/posts/new">New</a>
        <% } %>
      </div>

    </div>
  </body>
</html>

1. index.ejs에서 new 버튼은 로그인된 경우에만 보이게 됩니다. 참고로 isAuthenticated함수는 게시판 - Login 기능 추가강좌에서 index.js속에 만들었던 함수입니다. req.locals에 들어있어서 ejs에서 바로 사용할 수 있습니다.

<!-- views/posts/show.ejs -->

...

      <div class="mt-3">
        <a class="btn btn-primary" href="/posts">Back</a>
        <% if(isAuthenticated && post.author && currentUser.id == post.author.id){ %> <!-- 1 -->
          <a class="btn btn-primary" href="/posts/<%= post._id %>/edit">Edit</a>
          <form action="/posts/<%= post._id %>?_method=delete" method="post" class="d-inline">
            <a class="btn btn-primary" href="#" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
          </form>
        <% } %>
      </div>

...

1. 로그인이 된 상태이고, 게시물의 작성자 id(post.author.id)와 현재 로그인된 사용자의 id(currentUser.id)가 일치하는 경우에만 edit, delete 버튼을 보여줍니다. currentUser 역시 req.locals에 들어있어서 ejs에서 바로 사용할 수 있습니다.

<!-- views/users/show.ejs -->

...

      <div>
        <% if(isAuthenticated && currentUser.id == user.id){ %> <!-- 1 -->
          <a class="btn btn-primary" href="/users/<%= user.username %>/edit">Edit</a>
        <% } %>
      </div>

    </div>
  </body>
</html>

1. 로그인이 된 상태이고, 해당 user id(user.id)와 현재 로그인된 사용자의 id(currentUser.id)가 일치하는 경우에만 edit 버튼을 보여줍니다.

실행결과

로그인 전

index view에 new 버튼이 없습니다.

show view에 edit, delete 버튼이 없습니다.

로그인 후

new 버튼이 보입니다.

자신이 작성한 게시물의 경우 edit, delete 버튼이 보입니다.

로그인 하지 않은 상태에서 주소창에 /posts/new를 입력하여 가려고 하는 경우,

에러메세지와 함께 로그인화면으로 redirect됩니다.

마치며...

이제 1. data의 CRUD 구현, 2. data 간의 관계(relationship) 형성, 3. 회원가입 및 로그인 구현, 4. 접근 제한까지 웹사이트 제작의 큰 틀은 모두 익히셨습니다!

게시판 만들기 강의는 사실 '가장 기본적인 기능을 가지고 있는 웹사이트'를 만드는 것이 목적이였습니다. 그렇기 때문에 게시판뿐만 아니라 어떠한 사이트를 만들든지 회원가입/로그인 기능이 있다면 위 코드를 그대로 가져간 다음, 자신의 목적에 맞게 코드를 추가/변경하여 쓰셔도 됩니다. (어떠한 상업적/비상업적 프로젝트라도 일일이 제 허락을 구하실 필요없이 이 코드를 가져다 쓰셔도 괜찮습니다. 다만, 만약 제 코드에 어떠한 오류가 있어서 문제가 발생하더라도 저는 책임은 지지 않습니다.)

하지만 기초강의에 초점을 맞추고 웹사이트 제작의 전반에 대해 설명하다 보니 사이트의 범용적인 기능들은 가지고 있으나, 게시판으로는 많이 부족한 것이 사실입니다. 이어지는 게시판(고급)강의에서는 좀 더 게시판을 게시판답게 만들어 보겠습니다.

** 현재 항목(Node JS 첫걸음/게시판 만들기)의 마지막 글입니다.

• 관련 강의(optional): node.js 디버깅 방법
• 관련 강의(optional): Heroku(헤로쿠) 가입, Heroku CLI 다운로드, 간단 사용법
• 관련 강의(optional): Node.js 사이트 Heroku(헤로쿠)로 인터넷에 올리기
• 관련 강의(optional): Node.JS&Socket.io 채팅사이트 만들기
• 이어지는 항목으로 이동: Node JS 첫걸음/게시판 만들기(고급)