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

2017. 10. 25. 12:57

728x90

명색이 관리자 화면인데, 아무나 들어와서 조작하면 안되겠지요? 이제는 마지막으로 로그인/로그아웃 처리를 해보겠습니다. 로그인/로그아웃은 세션을 이용해서 구현합니다.

로그인 화면을 구성합니다. 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')

http://localhost:3333/mgmt/ 에 접속하면 로그인화면이 나올 것입니다.

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')

여기까지 작성하면, 로그인해야만 http://localhost:3333/mgmt/admin 을 접근할 수 있게 된다.

728x90

저작자표시 비영리 변경금지

'프로그래밍 > Javascript' 카테고리의 다른 글

ESLint 에서 세미콜론 사용하기 설정 (0)	2021.12.17
AdonisJs 4.0 Tutorial (0)	2017.10.26
(AdonisJs 4.0 Tutorial) 개인정보 양방향암호화(AES256) 하기 (0)	2017.10.24
(AdonisJs 4.0 Tutorial) 비밀번호 단방향암호화(SHA256) 하기 (0)	2017.10.23
(AdonisJs 4.0 Tutorial) 관리자 삭제하기 (0)	2017.10.20

인생공략집

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

'프로그래밍 > Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바