(AdonisJs 4.0 Tutorial) 로그인/로그아웃 처리하기

-

  • 명색이 관리자 화면인데, 아무나 들어와서 조작하면 안되겠지요? 이제는 마지막으로 로그인/로그아웃 처리를 해보겠습니다. 로그인/로그아웃은 세션을 이용해서 구현합니다.
  • 로그인 화면을 구성합니다. xyz/resources/views/mgmt/index.edge 을 작성합니다.
    <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
 
<div class="container" style="margin-top: 20px">
  <form action="/mgmt/login" method="post" class="form-horizontal" style="margin: 0 auto; max-width: 360px;">
    {{ csrfField() }}
    <div class="form-group">
      <label for="userid" class="col-sm-3 control-label">아이디</label>
      <div class="col-sm-9">
        <input type="text" id="userid" name="userid" class="form-control" placeholder="당신의 ID를 입력하세요..." required autofocus>
      </div>
    </div>
    <div class="form-group">
      <label for="passwd" class="col-sm-3 control-label">비밀번호</label>
      <div class="col-sm-9">
        <input type="password" id="passwd" name="passwd" class="form-control" placeholder="비밀번호를 입력하세요..." required>
      </div>
    </div>
    <input type="submit" class="btn btn-primary btn-block" value="로그인" />
  </form>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
  • xyz/app/Controllers/Http/Mgmt/MainController.js 를 생성합니다.
    'use strict'
 
class MainController {
  index ({view}) {
    return view.render('mgmt/index')
  }
}
 
module.exports = MainController
  • xyz/start/routes.js 다음을 추가합니다.
      Route.get('/', 'Mgmt/MainController.index').as('mgmt_index')
  • xyz/app/Models/Admin.js 에 다음을 추가합니다.
    ...
 
  static async isMember(userid, password) {
    const enc_passwd = crypto.createHash('sha256').update(password).digest('base64')
    const cnt = await this.query().whereRaw('userid = ? and password = ?', [userid, enc_passwd]).count('id as cnt')
    return cnt[0]['cnt'] == 0 ? false : true;
  }
 
...
  • xyz/app/Controllers/Http/Mgmt/MainController.js 에 Admin모델을 포함시키고, 다음을 추가한다.
    ...
 
const Admin = use('App/Model/Admin')
 
...
 
  // 로그인
  async login ({request, response, session}) {
    let userid = request.input('userid')
    let passwd = request.input('passwd')
 
    let is_member = await Admin.isMember(userid, passwd)
    if (is_member) {
      await session.put('mgmt-login', true)
      return response.route('mgmt_admin')
    }
 
    return response.route('mgmt_index')
  }
 
...
  • xyz/start/routes.js 에 다음을 추가한다.
    ...
 
  Route.post('/login', 'Mgmt/MainController.login').as('mgmt_login')
 
...
  • xyz/resources/views/mgmt/admin/index.edge 에 다음을 적당한 곳에 추가한다.
    ...
 
<a href="/mgmt/logout">[로그아웃]</a>
 
...
  • xyz/app/Controllers/Http/Mgmt/MainController.js 에 다음을 추가한다.
    ...
 
  // 로그아웃
  async logout ({session, response}) {
    await session.forget('mgmt-login')
    return response.route('mgmt_index')
  }
 
...
  • xyz/start/routes.js 에 다음을 추가한다.
    ...
 
  Route.get('/logout', 'Mgmt/MainController.logout').as('mgmt_logout')
 
...
    이제, 로그인도 해보고, 로그아웃도 해보세요. ^^
  • AuthMgmt 미들웨어를 생성한다.
    $ cd xyz
$ adonis make:middleware AuthMgmt
  • xyz/app/Middlware/AuthMgmt.js 내용은 아래와 같이 작성한다.
    'use strict'
 
class AuthMgmt {
  async handle ({ session, response }, next) {
    // call next to advance the request
    const mgmt_login = await session.get('mgmt-login')
    if (mgmt_login != true) {
      return response.route('mgmt_index')
    }
    await next()
  }
}
 
module.exports = AuthMgmt
  • xyz/start/kernel.js 에 AuthMgmt 를 추가한다.
    ...
 
const namedMiddleware = {
...
 
  auth_mgmt: 'App/Middleware/AuthMgmt'
 
...
}
 
...
  • xyz/start/routes.js 파일을 아래처럼 수정한다.
    const Route = use('Route')
 
Route.group('mgmt', function () {
  Route.get('/', 'Mgmt/MainController.index').as('mgmt_index')
  Route.post('/login', 'Mgmt/MainController.login').as('mgmt_login')
  Route.get('/logout', 'Mgmt/MainController.logout').as('mgmt_logout')
}).prefix('/mgmt')
 
Route.group('mgmt_secure', function () {
  Route.get('/admin', 'Mgmt/AdminController.index').as('mgmt_admin')
  Route.get('/admin/insert_form', 'Mgmt/AdminController.insert_form').as('mgmt_admin_insert_form')
  Route.post('/admin/insert', 'Mgmt/AdminController.insert').as('mgmt_admin_insert')
  Route.get('/admin/chg_passwd_form/:id', 'Mgmt/AdminController.chg_passwd_form').as('mgmt_admin_chg_passwd_form')
  Route.post('/admin/chg_passwd', 'Mgmt/AdminController.chg_passwd').as('mgmt_admin_chg_passwd')
  Route.get('/admin/update_form/:id', 'Mgmt/AdminController.update_form').as('mgmt_admin_update_form')
  Route.post('/admin/update', 'Mgmt/AdminController.update').as('mgmt_admin_update')
  Route.get('/admin/delete/:id', 'Mgmt/AdminController.delete').as('mgmt_admin_delete')
}).prefix('/mgmt').middleware('auth_mgmt')

댓글

댓글 쓰기

이 블로그의 인기 게시물

야마하 디지털 피아노 YDP-140

-
이미지
지난 12월부터 피아노를 배우기 시작했습니다. 가자고 있는 피아노가 없어서 아는 분에게 키보드를 빌려서 연습했는데요. 건반의 느낌과 음질이 너무 달라서 연습하기 어려웠습니다. 더군다나 패달도 없으니 더욱 연습하는 것이 쉽지 않더라구요. 이제 레슨을 받은지도 한달 반정도 지났고, 재미도 붙고 해서 평행 꾸준히 칠 수 있을 것이라는 판단으로 디지털 피아노를 구입하기로 마음 먹었습니다. 디지털 피아노의 정보를 얻기 위해서 네이버 디지털 피아노 사랑 이라는 카페에 가입하여 여러 사람들의 의견들을 들었습니다. 어떤 브랜드가 있고, 각 브랜드별로 어떤 모델들이 있는지 알아보았고, 오프라인 매장에 가서 직접 두들겨 보기도 했습니다. 오랫동안 피아노를 쳤던 분들은 각 피아노의 느낌이 다르다고 하던데, 저는 전혀 구별이 안되더군요. 그래서 굳이 너무 비싼 제품은 필요없다고 판단하였습니다. 최종적으로 80만원대 제품을 선정하기로 했습니다. 마침 작년 12월 말에 네이버 디지털 피아노 사랑에서 다이나톤 모션7H 라는 모델 공구를 진행하고 있었습니다. 가격도 괜찮았고 기능도 괜찮았지만, 크기와 구입시기가 맞지 않아서 그만 두었습니다. 결국 카시오 PX-130 과 야마하 P-85 라는 제품을 알아보게 되었는데, 스탠드형이라 이동시 편한 점이 있었으나, 전용 스탠드와 패달을 함께 주문하면 야마하 YDP-140 과 거의 비슷한 가격이 되었습니다. YDP-140은 일반 피아노와 비슷하게 생긴 콘솔형이며 P-85와 사양이 거의 비슷합니다. 이렇게 해서 결국 피아노처럼 생긴 YDP-140 을 구입하기로 하였습니다. 요즘 이 제품의 판매금액은 80만 초반대를 형성하고 있습니다. 아래는 인증사진입니다. *^^* 이제 연습 열심히 하여서 다양한 곡들 연주할 수 있으면 좋겠습니다. 다른 사람들과 합주해보는 것도 좋겠구요.
자세한 내용 보기

테이블위로 마우스 커서 이동시 색깔 변경하기

-
테이블위로 마우스커서가 이동될때 각 행을 지나갈 때마다 하이라이트되게 하려면 CSS 에서 간단하게 해결할 수 있습니다. 방법은 아래와 같이 TR 태그에 hover 에 컬러를 지정해주기만 하면 됩니다. tr.attention:hover {background: #BBBBFF;} 그런데, 이 방법에는 한가지 문제점이 있는데 행수가 많아지면 마우스 이동시 색변경이 늦어집니다. 그래서, 자바스크립트(jQuery)로 구현해보았습니다. jQuery 의 hover 함수를 이용한 것입니다. $(document).ready(function() {   $("tr.attention").hover(     function(){$(this).css("background","#BBBBFF")},      function(){$(this).css("background","#FFFFFF")}   ); }); 한 줄로 간단하게 구현이되지만, 역시 느렸습니다. 그래서, 직접 mouseover 와 mouseout 이벤트를 이용하여 구현해보았습니다. var color_old; $(document).ready(function() {   $("tr.attention").bind('mouseover', function(event){     color_old = $(this).css('background-color');     $(this).css('background-color', '#BBBBFF');   });   $("tr.attention").bind('mouseout',  function(event){     $(this).css('background-color', color_old);   }); ...
자세한 내용 보기

피아노 연습

-
이미지
이번주에는 연말 성과 관련 작업으로 바쁘게 보내다가 어제 겨우 일찍 퇴근해서 피아노는 연습을 했습니다. 같은 부서 차장님에게 빌려온 야마하 키보드로 연습을 했지요. 적당한 자리가 없어서 바닥에 놓고 했는데, 자세가 좋지 않다보니 금방 손이 아프더군요. 그리고, 아무래도 타건감이 좋지 않아서 실제 피아노를 치게 되면 문제가 있습니다. 전자키보드는 키 하나에 단순히 하나의 음만 나오게 되고, 살짝 치곤 세게 치건 똑같은 소리가 나옵니다. 그런데 진짜 피아노는 그렇지 않지요. 건반도 무게감이 있고 힘있게 치느냐 살짝 치느냐에 따라서 음의 느낌도 달라집니다. 제대로 된 전자피아노를 사고 싶은 생각이 팍팍~ 듭니다. 아직 모델을 정하지 못했는데, 이번 주말에 아차산역에 있는 아이캔피아노라는 매장에 가서 직접 보려구요. 집에서도 가깝고 사이트에 가보니 가격도 저렴한 편인 것 같아요. 요즘 네이버 디피카페에서 다이나톤 공구중인데 가격과 AS기간에 매리트가 있더군요. 20일까지 주문이던데... 몇가지 해결해야 될 문제가 있어서 아쉽지만 그때까지는 구입하지 못 할 것 같습니다.
자세한 내용 보기