皆さん、こんにちはこんばんは。
今回はAdonisJS v5をインストールしたはいいけど、何から始めればよいか分からない方に向けてログイン機能の実装をご紹介したいと思います。
少しボリュームが大きくなりそうなので分割して投稿していきます。
※View（edge等）周りに関しては今回の記事では触れません。
必要なファイルを用意する
まずはログイン機能を実装する上で必要なファイルを作成していきたいと思います。
AdonisフレームワークはMVCモデルになるので、それぞれ必要なファイルを用意していきます。
|
1 2 3 4 5 |
node ace make:migration user node ace make:controller ../Api/user node ace make:model user node ace make:validator UserLogin node ace make:validator UserRegister |
[ error ] "make:{command}" command not found
このようなエラーが発生する場合はこちらの記事から設定を確認してみてください。
コマンド実行後、以下のファイル階層にそれぞれマイグレーション、コントローラー、モデル、バリデーションファイルが作成されているはずです。
|
1 2 3 4 5 |
app/Controllers/Api/UsersController.ts ← コントローラー app/Models/Users.ts ← モデル database/migrations/{TIMESTAMP}_users.ts ← マイグレーション app/Validators/UserLoginValidator.ts ← バリデーション app/Validators/UserRegisterValidator.ts ← バリデーション |
Adonisでは複数形で表現されることが多いので、”user”と打つと”users”に変換されて作成されます。
コントローラーの作成場所ですが、”user”のまま作成を行うと”app/Controllers/Http/UsersController.ts”という階層で作成されてしまうため、Api階層に設置したいのでこのようにしています。
※AdonisJS v4ではApiは”app/Controllers/Api/”に設置され、Websocketは”app/Controllers/Ws/”に設置されるのでその名残りを受けて私の記事ではこのような階層にしています。
テーブルを作成していく
続いてユーザーのテーブルをデータベースに作成していきます。
修正するファイルは以下です。
“database/migrations/{TIMESTAMP}_users.ts”
※先ほど作成したマイグレーションファイルを修正していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import BaseSchema from '@ioc:Adonis/Lucid/Schema' export default class extends BaseSchema { protected tableName = 'users' public async up () { this.schema.createTable(this.tableName, (table) => { table.increments('id').unsigned().primary() //← 追加 table.string('username', 80).notNullable() //← 追加 table.string('login_id', 191).notNullable().unique() //← 追加 table.string('email', 254).nullable() //← 追加 table.string('password', 191).notNullable() //← 追加 table.timestamps() //← 追加 /** * Uses timestamptz for PostgreSQL and DATETIME2 for MSSQL */ //table.timestamp('created_at', { useTz: true }) //table.timestamp('updated_at', { useTz: true }) }) } public async down () { this.schema.dropTable(this.tableName) } } |
今回は至ってシンプルなテーブル構造にしました。
ログインに必要な最低限の情報のみになります。修正ができたらマイグレーションを実行します。
|
1 |
node ace migration:run |
これで”users”テーブルがデータベースに追加されました。
“migration”コマンドはLaravelと同じようにロールバックすることやバッチ番号を指定してカスタムのロールバックを行うこともできます。
|
1 2 3 |
node ace migration:rollback node ace migration:rollback --batch=1 node ace migration:reset |
バッチ番号は”adonis_schema”テーブルにバッチ番号が保存されているので、そちらで確認することができます。
ルートを追加する
テーブルが作成できたら次はログイン処理を行うためのルートを設定していきます。
ログインのリクエストにはAPIを想定して処理を行うため別途APIルートを作成していきたいと思います。
まずはどのようなルートが設定されているか以下のコマンドで確認してみます。
|
1 |
node ace list:routes |
実行すると現在は特に設定していないため、デフォルト設定の画像のように表示されるかと思います。
ここからログイン処理用のAPIルートを設定していきます。
ルートを追加する方法
ルートを追加する方法は主に2パターンあります。
1つめは”start/routes.ts”に直接追記していく方法です。
2つめはルートモジュールを作成して”start/routes.ts”でインポートする方法です。
私は1つにまとめるやり方はあまり好きではなく、大枠で分割したい派なので2つめのルートモジュールを作成する方法で行なっていきます。
※追加する方法は個人やプロジェクトの規模にもよるので好きな方で追加してください。
ルートモジュールを追加していきますが、公式ではオリジナルのモジュールを追加する時に以下の階層に設置する想定で説明されています。
“app/Modules/”
※Modulesディレクトリはデフォルトでは存在していないため作成する必要があります。
ですが、私はルートモジュールがそもそも”app”配下に存在してること自体が違和感でありLaravel出身ということもあるので、ルートモジュールは”start”配下に設置していきたいと思います。
|
1 |
touch start/apiroutes.ts |
まずは”start”配下にAPIルートのモジュールを作成します。
ルートをグループ化して可視化しやすいようにAPIルートを記述していきます。
|
1 2 3 4 5 6 |
import Route from '@ioc:Adonis/Core/Route' Route.group(() => { Route.post('/login', 'UsersController.login') Route.post('/register', 'UsersController.register') }).prefix('/api/auth').namespace('App/Controllers/Api') |
中身は一旦ログイン用とアカウント登録用のエンドポイントをPOSTメソッドで用意しておきます。View周りは触れないのでGETメソッドは今回は無しです。
※コントローラーの中身は後ほど用意します。
APIルートのモジュールができたらインポートさせていきます。
“start/routes.ts”を以下のように編集します。
|
1 2 3 4 5 6 7 |
import './apiroutes.ts' //← ここを追加 import Route from '@ioc:Adonis/Core/Route' Route.get('/', async ({ view }) => { return view.render('welcome') }) |
編集ができたらルートが追加されているか確認します。
|
1 |
node ace list:routes |
このように追加したAPIルートが表示されていればOKです。
最後に
これでログイン機能を作成する事前設定が完了しました。
少しボリュームが大きくなってしまったので、次回はこれに引き続き実際にアカウントの登録処理からログインまでの一連の流れを実装していきたいと思います。
ログイン機能の続きの実装記事を公開しました。こちらから引き続き参考にしてみてください。
今回の流れはログイン処理に関わらずAdonisで機能を実装していく時には必要不可欠なものですので是非試してみてください！
