이 단문에서 저는 koa 응용 프로그램에 기능이 완비된 관리 패널을 추가하는 방법을 보여 드리겠습니다.
이것은 7분 길이의 문장으로 너의 몇 주 동안의 일을 절약할 수 있다.
이 강좌를 마치면 인증, 예쁜 인터페이스, 전체 데이터 CRUD가 있는 응용 프로그램이 있습니다.그 밖에 당신은 자신의 구체적인 수요에 따라 조정할 수 있습니다.

창고

분명히 우리는 koa와 그 일부 모듈을 사용할 것이다.그러나 관리 패널 인터페이스로서 우리는 AdminBro를 사용할 것이다. 지난주에 이것은 정부koa의 지지를 받았다.
핫뉴스입니다 ^^

설치

처음부터 Repo를 초기화하고 설치koa:

mkdir koa-admin
cd koa-admin
yarn init 
yarn add koa

현재 설정 관리 패널에 필요한 다음 의존 항목:

yarn add admin-bro @admin-bro/koa @koa/router koa2-formidable

관리 설정 - 기본

지금 우리는 반드시 관리 인터페이스를 시작해야 한다.index.js 파일을 만들고 다음 내용을 삽입합니다.

// index.js
const AdminBro = require('admin-bro')
const { buildRouter } = require('@admin-bro/koa')

const Koa = require('koa')
const app = new Koa()

const adminBro = new AdminBro({
  databases: [],
  rootPath: '/admin',
})

const router = buildRouter(adminBro, app)

app
  .use(router.routes())
  .use(router.allowedMethods())

app.listen(3000)

우리가 한 일:

일반 koa 응용 프로그램 만들기

기본 설정을 사용하여 AdminBro 초기화

사용buildRouter방법

연결admin
이제 node 명령으로 응용 프로그램을 실행합시다.nodemon

node index.js

http://localhost:3000/admin 페이지에 액세스합니다.다음과 같은 내용을 볼 수 있습니다.

좋아, 그것은 매우 예쁘고 쓸모가 있지만, 작용은 크지 않아.이 점을 바꾸자.

너의 데이터로 그것을 채워라

이것은 koa 자체와 완전히 관련이 없는 부분이다.AdminBro 다양한 데이터를 관리할 수 있습니다.다음과 같은 어댑터를 지원합니다.

@admin-bro/sequelize

@admin-bro/typeorm

@admin-bro/mongoose

@adminbro/firebase(테스트판)

본고에서 몬구스 어댑터를 사용하여 MongoDB 데이터를 표시하는 가장 간단한 예시를 보여 드리겠습니다. 우선, MongoDB 로컬에서 실행되는지 확인하십시오.
현재 mongose 의존 항목을 설치합니다.

yarn add @admin-bro/mongoose mongoose

그리고 index.js 파일을 변경합니다.

새로운 의존항이 필요하며, 전달된 모델을 어떻게 처리하는지 알 수 있도록 AdminBro에 mongose 어댑터를 등록합니다.

새로운 족제비 모형을 만듭니다. email 및 encryptedPassword 사용자가 있습니다.

우리는 먼저 await 몬고를 connect 방법으로 전환해야 한다.이것이 바로 우리가 함수로 전체 설정을 포장해야 하는 이유이다.

설정에서 AdminBro의 async 그룹에 사용자를 전달합니다.

이것은 업데이트된 resources 파일입니다.

const AdminBro = require('admin-bro')
const mongoose = require('mongoose')
const AdminBroMongoose = require('@admin-bro/mongoose')
const { buildRouter } = require('@admin-bro/koa')

const Koa = require('koa')
const app = new Koa()
AdminBro.registerAdapter(AdminBroMongoose)

const User = mongoose.model('User', {
  email: { type: String, required: true },
  encryptedPassword: { type: String, required: true },
});

const run = async () => {
  const mongoose = require('mongoose')
  await mongoose.connect('mongodb://localhost:27017/test', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  const adminBro = new AdminBro({
    resources: [User],
    rootPath: '/admin',
  })

  const router = buildRouter(adminBro, app)

  app
    .use(router.routes())
    .use(router.allowedMethods())

  app.listen(3000)
}

run()

이것이 바로 새 사용자를 만드는 과정입니다.

사용자 모델에 대해 AdminBro는 완전한 CRUD를 생성하고 검증했습니다.

암호 해시

문제는 암호 필드가 사용자가 어떤 정보를 전달할 때마다 해시 처리를 해야 한다는 점이다.다행히도 AdminBro에는 AdminBro Features 라고 불리는 설치 가능한 코드 블록이 포함되어 있습니다.알아맞혀 봐, 비밀번호 산열에는 하나의 특성이 있어.
먼저 argon2 을 사용하여 암호를 암호화하는 데 사용됩니다.

yarn add @admin-bro/passwords argon2

이렇게 AdminBro 옵션에 기능 전달

const passwordFeature = require(‘@admin-bro/passwords’)
const argon2 = require(‘argon2’)
// …

const adminBro = new AdminBro({
    resources: [{
      resource: User,
      options: {
        properties: { encryptedPassword: { isVisible: false } },
      },
      features: [passwordFeature({
        properties: { encryptedPassword: 'encryptedPassword' },
        hash: argon2.hash,
      })]
    }],
    rootPath: '/admin',
  })

기본적으로 이렇다.이제 암호가 자동으로 산열되는 사용자를 만들 수 있습니다.쿨 - 맞아요?
계속하기 전에 전자 메일과 비밀번호를 알고 있는 사용자를 하나 이상 만듭니다.내 제안: index.js

인증

데이터베이스에 사용자가 있기 때문에 적당한 암호 산열을 통해 우리는 신분 검증 메커니즘을 추가합니다.
이를 위해서는 [email protected]:password 을 buildRouter 로 변경하고 buildAuthenticatedRouter 방법을 정의해야 합니다.
그 전에 우리는 인증이 쿠키를 사용하기 때문에koaasync authenticate를 설정해야 한다.

app.keys = ['super-secret1', 'super-secret2']

most probably in the real world example you would like to take them from process.env

다음으로 app.keys 라우터를 buildRouter 라우터로 변경합니다.

const router = buildAuthenticatedRouter(adminBro, app, {
    authenticate: async (email, password) => {
      const user = email && await User.findOne({ email })
      if (password && user && await argon2.verify(user.encryptedPassword, password)){
        return user.toJSON()
      }
      return null
    },
  })

따라서 우리는 먼저 기존 사용자를 찾아서 buildAuthenticated 그녀의 비밀번호를 검사한다.만약 모든 것이 정확하다면, 우리는 사용자 대상으로 돌아가고, 이 대상은 세션에 들어갈 것이다.그런 다음 AdminBro에서 사용할 수 있습니다.
이것은 우리가 다시 응용 프로그램을 실행한 후에 본 것이다.

방금 만든 이메일과 비밀번호로 채워주세요 (부언: 제안 argon2:) - 성공했습니다.

결론, 다음 단계는 무엇입니까

Uff, 우리는 해냈다.우리는 몇 분 안에 전체 응용 프로그램, 인증, 암호 해시 및 사용자 관리(CRUD)를 시작했다.이 모든 것은 놀라운 koa 프레임워크와 일류 admin-bro 관리 패널 덕분이다.
여기서 너는 많은 일을 할 수 있다.

UI 모양 수정

신규 리소스 추가

정의된 작업(예: 승인, 사용자 비승인 등)

역할 기반 액세스 제어 추가

그 이상

사용 가능한 모든 옵션을 보려면 adminbro.com 문서 페이지를 참조하십시오. 이것은 거대한 페이지입니다.
AdminBro는 Software Brothers 개발자가 자주 업데이트하므로 star the repo 권장 사항을 확인하십시오:).koa로 같은 일을 하다.
나는 네가 이 간단한 강좌를 좋아하길 바란다.다음에는 좀 더 고급스러운 AdminBro 주제를 소개하고 싶습니다.
필요한 경우 서버 코드가 - you can do this here 인 파일을 다운로드할 수 있습니다.