Sails.js Tutorial : 관리자 추가하기

• xyz/config/csrf.js 를 열어서 아래 내용의 주석을 풀어 CSRF를 활성화시킨다.

  ...
   
  module.exports.csrf = {
     grantTokenViaAjax: true,
     origin: ''
  }
   
  ...

• 우선 xyz/views/mgmt/admin/index.ejs 에 다음을 추가한다.

  ...
   
  <div style="text-align: right; padding-bottom: 10px">
    <a href="/mgmt/admin/insert_form" class="btn btn-default" data-toggle="modal" data-target="#myModal">관리자 추가</a>
  </div>
   
  ...
   
  <div id="myModal" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>
   
  ...
   
  <script>
  // Modal Remote Reload
  $(document).on('hidden.bs.modal', function (e) {
      $(e.target).removeData('bs.modal');
  })
  </script>
   
  ...

• http://localhost:1337/mgmt/admin 을 다시 보면, 관리자 추가 버튼이 새로이 나타날 것이다.

• 관리자 입력 양식을 만들자. xyz/views/mgmt/admin/insert_form.ejs

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">관리자 추가</h4>
  </div>
  <div class="modal-body">
    <form name="insert_form" action="/mgmt/admin/insert" method="post">
      <input type='hidden' name='_csrf' value='<%= _csrf %>'>
      <div class="form-group">
        <label>아이디 <small>(필수)</small></label>
        <input type="text" name="userid" class="form-control" required>
      </div>
      <div class="form-group">
        <label>비밀번호 <small>(필수)</small></label>
        <input type="password" id="password" name="passwd1" class="form-control" required>
      </div>
      <div class="form-group">
        <label>비밀번호 확인 <small>(필수)</small></label>
        <input type="password" name="passwd2" class="form-control" required>
      </div>
      <div class="form-group">
        <label>별명 <small>(필수)</small></label>
        <input type="text" name="nick" class="form-control" required>
      </div>
      <div class="form-group" style="text-align: right">
        <input class="btn btn-primary" type="submit" value="관리자 추가" />
      </div>
    </form>
  </div>

• xyz/api/controllers/mgmt/AdminController.js 에 다음 코드를 추가한다.

  ...
   
    // 관리자 추가 폼
    insert_form: function (req, res) {
      res.locals.layout = null;
      return res.view('mgmt/admin/insert_form');
    },
   
  ...

• xyz/config/routes.js 에서 mgmt 그룹안에 다음을 추가한다.

    'get /mgmt/admin/insert_form' : 'mgmt/AdminController.insert_form',

• 관리자 추가 버튼을 클릭하면 모달 다이얼로그 박스 형식의 입력 양식이 나올 것이다.

• 이제, 실제로 DB에 관리자를 추가해보자. xyz/api/controllers/mgmt/AdminController.js 에 다음을 추가한다.

  ...
   
    // 관리자 추가
    // /mgmt/admin/insert
    insert: function (req, res) {
      let userid  = req.body.userid;
      let passwd1 = req.body.passwd1;
      let passwd2 = req.body.passwd2;
      let nick    = req.body.nick;
   
      if (passwd1 != passwd2) {
        res.redirect('/mgmt/admin');
        return;
      }
   
      Admin.create({userid: userid, password: passwd1, nick: nick}).exec(function (err, finn) {
        res.redirect('/mgmt/admin');
      });
    },
   
  ...

• xyz/config/routes.js 에서 mgmt 그룹안에 다음을 추가한다.

    'post /mgmt/admin/insert' : 'mgmt/AdminController.insert',

• 코드 작성은 완료되었으니, 실제 화면에서 관리자를 등록해보면 목록에 표시되는 것을 볼 수 있을 것이다.