この短い記事では、あなたのKEAアプリケーションにフル機能の管理パネルを追加する方法を示します.
これは、仕事の数週間を保存することができます7分の長い記事です.
このチュートリアルに従うと、認証、美しいインターフェイスとデータの全体のcrudとアプリケーションがあります.さらに、あなたの特定のニーズにそれを調整することができます.

スタック

明らかに我々はKOAをモジュールのいくつかで使用します.しかし、管理パネルインターフェイスとして、我々は使用されますAdminBro , オフィシャルサイトkoa サポート先週.
それで、これはホットなニュースです

インストール

最初から起動した場合、repoとinstallを初期化します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 方法

さて、アプリを実行してみましょうnode コマンド.(また、nodemon )

node index.js

そして、http://localhost:3000/admin ページ.次のようになります.

OK、それはきれいです、そして、それは働きます、しかし、それは多くをしません.それを変えましょう.

データを入力します

これは厳密には関連していない部分ですkoa 自身.AdminBro あなたの能力をすべての種類のデータを管理することができます.次のアダプタをサポートします.

@admin-bro/sequelize

@admin-bro/typeorm

@admin-bro/mongoose

@( Admin bro/firebase ( beta )

この記事では、あなたからのデータを示す最も簡単な例を示しますMongoDB マングースアダプターで、しかし、まず、あなたが持っていることを確認してくださいMongoDB ローカルで動作する.
Mongoose依存関係をインストールする

yarn add @admin-bro/mongoose mongoose

そして、我々の変化index.js ファイル.

新しい依存関係を必要とし、Adminbroでマングースアダプターを登録するので、それは渡されたモデルを処理する方法を知っている.

新しいマングースモデルを作成email and encryptedPassword .

我々はawait for mongo to connect まず方法.これは、我々が全体のセットアップをラップする必要がある理由ですasync 関数.

セットアップの中で、我々はユーザーを渡すresources Adminbroの配列.

これは更新ですindex.js ファイル

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

そして、これは基本的にそれです.これで、ユーザーを作成することができますパスワードを自動的にハッシュされます.クール-右?
前に移動する-作成、少なくとも1つのユーザーが既知のメールとパスワードを使用します.おすすめします[email protected]:password

認証

適切なパスワードハッシュでデータベースにユーザーがいるので、認証メカニズムを追加しましょう.
それをするために、我々は変化しなければならないでしょうbuildRouter to buildAuthenticatedRouter と定義するasync authenticate メソッド.
我々がこれをする前に、我々もKOAをセットしなければなりませんapp.keys 認証はクッキーを使っているからです.

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

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

次に、buildRouter to buildAuthenticated ルータ

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
    },
  })

それで、我々は最初に既存のユーザーを捜します、そして、我々argon2 . すべてが正しい場合は、ユーザーオブジェクトを返します.それは、Adminbroの中で使われることができます.
そして、これは我々が再びアプリケーションを実行した後に表示されます:

あなたがちょうど作成したメールとパスワードでそれを満たしてください[email protected]:password :)) - そして、あなたはです.

概要、次は何

UFF、我々はそれをしました.我々は、数分で全体のアプリケーション、認証、パスワードハッシングとユーザー管理を開始しました.驚くべきすべてに感謝koa フレームワークとadmin-bro 管理パネル.
ここからたくさんのことができます.

UIのルック＆フィールを変更

新しいリソースを追加

アクションを定義します

ロールベースのアクセス制御を追加する

そして多くの

すべての利用可能なオプションをチェックアウトするにはadminbro.com ドキュメントページ-それは巨大です.
Adminbroは非常に頻繁にソフトウェア開発者からの開発者によって更新されるので、確認してくださいstar the repo 動機づけを行うには、同じことをするkoa .
私はあなたがこの簡単なチュートリアルが好き願っています.次回はいくつかのより高度なAdminbroのトピックを説明したいと思います.
あなたが望むならば、あなたはサーバーコードで1つのファイルをダウンロードすることができますyou can do this here .