[Node.js/AdminBro] Admin Page panel + MongoDB

1. 심플하고 빠른 개발을 위한 Admin 페이지를 찾기로 했다. 

 

   기존에 쓰던 laravel(라라벨, php) 어드민(admin) 페이지도 매우 강력했지만, 서버 세팅까지 빠르게 끝낼 수 있는 것을 찾아보기로 했다.

 

Laravel Admin Panel 소개 영상

 

  그래서 찾은 것이 Node.js 였고, 어드민 페이지를 찾다보니 대표적인 Adminbro라는 어드민 페이지를 알게 되었다.

 

An Auto-generated Admin Panel for your Node.js Application

 

  Node.js 는 서버 세팅도 빠르게 끝낼 수 있고, 가벼우며 빠른 개발이 가능했기에 선택하게 되었다. Node.js를 많이 사용하고 있다고 하니, 학습해 놓는 것도 좋다고 생각한다.

 

심플하게 만든 Adminbro 페이지

 

 

 

Ⅰ. 기본 Adminbro 페이지

---

 

2. 사용 툴 visual studio code

 

Visual Studio Code - Code Editing. Redefined

 

  많은 툴이 있겠지만, 필자는 Visual Studio Code가 설치되어 있어서 그대로 사용해보았다. 툴에 대해서 이해가 많지 않아서 불편한 감이 있었지만 개발하는 데는 문제가 없었다.

 

 

 

3. Node.js 설치

 

Node.js

 

  Node.js를 다운로드하여 설치 후, cmd에서 node를 입력해서 실행된다면 준비가 된 것이다.

 

Node,js 설치 후 cmd 실행

 

 

 

4. MongoDB 설치

 

MongoDB Enterprise Server Download

 

  adminbro는 MongoDB를 사용하고 있었기 때문에 설치하도록 한다.

 

  설치 후, MongoDB Compass Tool이 설치되는데, 정상적으로 Connection이 이루어지면 설치가 된 것이다.

 

MongoDB Compass

 

 

 

5. cmd 창을 열고 아래와 같이 한 줄씩 설치하도록 한다. (프로젝트가 생성될 폴더이다.)

npm install admin-bro @admin-bro/express
npm install admin-bro-expressjs
npm install mongoose
npm install express
npm install @admin-bro/mongoose
npm install tslib
npm install express-session
npm install express-formidable

 

 

 

6. 프로젝트 생성할 폴더를 ROOT로 가정하겠다.

 

 

 

7. ROOT/index.js 파일을 만들고 아래와 같이 입력한다.

 

var express = require('express');
const User = require('./Models/User')
const AdminBro = require('admin-bro')
const AdminBroMongoose = require('@admin-bro/mongoose')
const AdminBroExpressjs = require('@admin-bro/express')

var app = express();
const mongoose = require('mongoose');//Routes
app.get('/', function (req, res) {
    res.send('Hello World!');
});

//Database
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});
mongoose.connection.once('open',function(){
    console.log('Database connected Successfully');
}).on('error',function(err){
    console.log('Error', err);
})

//Admin Bro
AdminBro.registerAdapter(AdminBroMongoose)

const AdminBroOptions = {
  resources: [User],
}

const adminBro = new AdminBro(AdminBroOptions)
const router = AdminBroExpressjs.buildRouter(adminBro)

app.use(adminBro.options.rootPath, router)
app.listen(3000, function () {
    console.log('Listening to Port 3000');
});

 

 

  1) 아래 코드는 test 이름으로 database가 생성된다.

mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});

 

test database가 생성된 모습

 

  2) 아래 코드는 포트 번호 3000을 사용하겠다는 의미이다.

app.listen(3000, function () {
    console.log('Listening to Port 3000');
});

 

 

 

 

8. ROOT/Models 폴더를 생성 후, User.js 파일을 만들고 아래와 같이 입력한다.

 

const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    required: true,
  },
  encryptedPassword: {
    type: String,
    required: true,
  },
  role: {
    type: String,
    enum: ['admin', 'member'],
    required: true
  }
})
module.exports = mongoose.model('User',UserSchema)

 

 

  1) 아래 코드는 database test에 Users와 맵핑이 된다. 이름 뒤에 s가 붙어서 Users라고 보인다.

module.exports = mongoose.model('User',UserSchema)

 

users가 생성된 모습

 

 

 

 

9.  cmd 창에서 ROOT 폴더로 이동 후, 아래와 같이 입력한다. 그러면 서버가 실행된다.

 

node index.js

 

cmd 성공 모습

 

 

 

10. 아래 URL으로 진입 후, 정상적으로 페이지가 구동되는지 확인한다.

 

http://localhost:3000/admin

 

정상적으로 페이지가 구동된 모습

 

 

 

 

Ⅱ. 로그인 기능 페이지

---

 

11. Admin 페이지에 관리자 로그인 기능이 없으면 이빨 빠진 것처럼 이상하기에 추가해본다.

 

 

 

12. Adminbro 페이지에서 User -> Create new -> 아래 그림과 같이 입력 후, Save를 누른다. 그러면 MongoDB에 데이터가 삽입되어 있는 것을 볼 수 있다.

 

Admin 계정 생성

 

 

MongoDB Compass 에서 admin 계정이 생성된 모습

 

 

 

13. ROOT/index.js 파일을 아래와 같이 수정한다.

 

var express = require('express');
const User = require('./Models/User')
const AdminBro = require('admin-bro')
const AdminBroMongoose = require('@admin-bro/mongoose')
const AdminBroExpressjs = require('@admin-bro/express')
const canEditEmp = ({ currentAdmin, record }) => {
    return currentAdmin && (
      currentAdmin.role === 'admin'
    )
  }

var app = express();
const mongoose = require('mongoose');//Routes
app.get('/', function (req, res) {
    res.send('Hello World!');
});

//Database
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});
mongoose.connection.once('open',function(){
    console.log('Database connected Successfully');
}).on('error',function(err){
    console.log('Error', err);
})

//Admin Bro
const canModifyUsers = ({ currentAdmin }) => currentAdmin && currentAdmin.role === 'admin'
AdminBro.registerAdapter(AdminBroMongoose)

const AdminBroOptions = {
  resources: 
  [{
    resource: User,  
    options: {
      properties: {
        encryptedPassword: { isVisible: true },
        password: {
          type: 'string',
          isVisible: {
            list: false, edit: true, filter: false, show: false,
          },
        },
      },
      actions: {
        new: {
          before: async (request) => {
            if(request.payload.record.password) {
              request.payload.record = {
                ...request.payload.record,
                encryptedPassword: await bcrypt.hash(request.payload.record.password, 10),
                password: undefined,
              }
            }
            return request
          },
        },
        edit: { isAccessible: canModifyUsers },
        delete: { isAccessible: canModifyUsers },
        new: { isAccessible: canModifyUsers },
      }
    }
  }],
}

const adminBro = new AdminBro(AdminBroOptions)
const router = AdminBroExpressjs.buildAuthenticatedRouter(adminBro, {
    authenticate: async (email, password) => {
      const user = await User.findOne({ email })
      console.log(user)
        if (user) {
          if (password === user.encryptedPassword) {
            return user
          }
        }
      return false
    },
    cookiePassword: 'session Key',
  })

app.use(adminBro.options.rootPath, router)
app.listen(3000, function () {
    console.log('Listening to Port 3000');
});

 

 

 

 

14. 수정 후, 서버를 구동한다.

서버가 정상적으로 구동된 모습

 

 

 

15. admin 페이지에 진입하면, 아래와 같이 로그인 페이지를 볼 수 있다.

 

http://localhost:3000/admin

 

adminbro 로그인 페이지가 구동된 모습

 

 

 

 

16. email과 password를 admin으로 채워 넣은 후, Login 버튼을 누르면 정상적으로 로그인되는 것을 확인할 수 있다.

 

정상적으로 로그인된 모습, 우측 상단에 로그인했다는 표시를 확인 할 수 있다.