×

LaravelとVue.jsを用いたロールとパーミッションのチュートリアル

未分類

LaravelとVue.jsを用いたロールとパーミッションのチュートリアル

Laravel 9とVue.jsのインストール

まずは、新しいLaravelプロジェクトを作成します。以下のコマンドを実行してください。

composer create-project --prefer-dist laravel/laravel blog

次に、作成したプロジェクトディレクトリに移動します。

cd blog

Laravel UIパッケージをインストールします。このパッケージは、Vue.jsをLaravelプロジェクトに統合するための簡単な方法を提供します。

composer require laravel/ui

次に、Vue.jsをインストールします。

php artisan ui vue

最後に、依存関係をインストールし、コンパイルします。

npm install
npm run dev

これで、Laravel 9とVue.jsのインストールが完了しました。次のステップでは、ロールとパーミッションを管理するためのパッケージをインストールします。

spatie/laravel-permissionパッケージのインストール

次に、ロールとパーミッションを管理するためのパッケージ、spatie/laravel-permissionをインストールします。以下のコマンドを実行してください。

composer require spatie/laravel-permission

このパッケージは、ユーザーにロールとパーミッションを割り当てるための簡単な方法を提供します。また、ミドルウェアを通じてルートへのアクセスを制御する機能も提供します。

パッケージをインストールしたら、マイグレーションを実行して、必要なテーブルをデータベースに作成します。

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" --tag="migrations"
php artisan migrate

これで、spatie/laravel-permissionパッケージのインストールが完了しました。次のステップでは、モデルの作成と更新を行います。

モデルの作成と更新

次に、RoleとPermissionモデルを作成します。これらのモデルは、spatie/laravel-permissionパッケージによって提供され、ロールとパーミッションの管理を容易にします。

しかし、このパッケージを使用する前に、まずUserモデルを更新する必要があります。Userモデルには、HasRolesトレイトを使用します。これにより、ユーザーにロールとパーミッションを割り当てるためのメソッドが提供されます。

Userモデルを更新するには、以下のようにuseステートメントを追加します。

use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;

    // ...
}

これで、Userモデルはロールとパーミッションを管理するためのメソッドを使用できます。次のステップでは、ルートの作成を行います。

ルートの作成

次に、アプリケーションのルートを作成します。これらのルートは、ユーザーがブラウザで特定のURLにアクセスしたときに、どのコントローラーとメソッドが呼び出されるかを定義します。

まず、web.phpルートファイルを開きます。このファイルは、routesディレクトリ内にあります。

Route::get('/roles', 'RoleController@index')->name('roles.index');
Route::post('/roles', 'RoleController@store')->name('roles.store');
Route::get('/roles/create', 'RoleController@create')->name('roles.create');
Route::get('/roles/{role}', 'RoleController@show')->name('roles.show');
Route::get('/roles/{role}/edit', 'RoleController@edit')->name('roles.edit');
Route::put('/roles/{role}', 'RoleController@update')->name('roles.update');
Route::delete('/roles/{role}', 'RoleController@destroy')->name('roles.destroy');

これらのルートは、それぞれロールの一覧表示、作成、表示、編集、更新、削除を行うためのルートです。それぞれのルートは、RoleControllerの特定のメソッドにマッピングされています。

これで、ルートの作成が完了しました。次のステップでは、コントローラーの作成を行います。

コントローラーの作成

次に、RoleControllerを作成します。このコントローラーは、ロールの作成、更新、削除などのアクションを処理します。

まず、以下のコマンドを実行してコントローラーを作成します。

php artisan make:controller RoleController

次に、RoleControllerクラスを開き、必要なメソッドを追加します。以下に一例を示します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Spatie\Permission\Models\Role;

class RoleController extends Controller
{
    public function index()
    {
        $roles = Role::all();
        return view('roles.index', compact('roles'));
    }

    public function create()
    {
        return view('roles.create');
    }

    public function store(Request $request)
    {
        Role::create(['name' => $request->name]);
        return redirect()->route('roles.index');
    }

    // 他のメソッドも同様に追加します...
}

これで、RoleControllerの作成が完了しました。次のステップでは、Vueファイルの作成と更新を行います。

Vueファイルの作成と更新

次に、Vue.jsを使用してフロントエンドのコンポーネントを作成します。これらのコンポーネントは、ユーザーインターフェースの一部を構成し、データの表示とユーザーの操作を処理します。

まず、resources/js/componentsディレクトリに新しいVueファイルを作成します。例えば、RoleComponent.vueという名前のファイルを作成することができます。

<template>
  <div>
    <!-- ロールの一覧を表示するためのコードをここに書きます -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      roles: []
    };
  },
  created() {
    // APIからロールのデータを取得するためのコードをここに書きます
  },
  methods: {
    // ロールの作成、更新、削除を処理するためのメソッドをここに書きます
  }
};
</script>

このコンポーネントは、ロールの一覧を表示し、新しいロールの作成、既存のロールの更新と削除を処理します。

最後に、作成したVueコンポーネントをLaravelのビューに組み込む必要があります。これを行うには、対応するBladeファイル（例えば、resources/views/roles/index.blade.php）に以下のコードを追加します。

@extends('layouts.app')

@section('content')
<div class="container">
    <role-component></role-component>
</div>
@endsection

これで、Vueファイルの作成と更新が完了しました。次のステップでは、ロールとパーミッションのためのシーダーファイルの作成を行います。

ロールとパーミッションのためのシーダーファイルの作成

次に、ロールとパーミッションの初期データを作成するためのシーダーファイルを作成します。Laravelのシーダーは、テストデータの生成やデータベースの初期化に便利なツールです。

まず、以下のコマンドを実行して新しいシーダーファイルを作成します。

php artisan make:seeder RolesAndPermissionsSeeder

次に、新しく作成したRolesAndPermissionsSeederクラスを開き、runメソッドを以下のように更新します。

<?php

use Illuminate\Database\Seeder;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

class RolesAndPermissionsSeeder extends Seeder
{
    public function run()
    {
        // パーミッションの作成
        $createPost = Permission::create(['name' => 'create post']);
        $editPost = Permission::create(['name' => 'edit post']);
        $deletePost = Permission::create(['name' => 'delete post']);

        // ロールの作成
        $editor = Role::create(['name' => 'editor']);
        $admin = Role::create(['name' => 'admin']);

        // ロールにパーミッションを割り当てる
        $editor->givePermissionTo($createPost, $editPost);
        $admin->givePermissionTo($createPost, $editPost, $deletePost);
    }
}

このシーダーファイルは、editorとadminという2つのロールと、create post、edit post、delete postという3つのパーミッションを作成します。そして、それぞれのロールに適切なパーミッションを割り当てます。

最後に、シーダーファイルを実行してデータベースに初期データを挿入します。

php artisan db:seed --class=RolesAndPermissionsSeeder

これで、ロールとパーミッションのためのシーダーファイルの作成が完了しました。次のステップでは、テストを行います。

テスト

すべての機能が正しく動作していることを確認するために、テストを行うことが重要です。LaravelはPHPUnitを使用したテストをサポートしています。

まず、新しいテストケースを作成します。以下のコマンドを実行してください。

php artisan make:test RoleTest

次に、新しく作成したRoleTestクラスを開き、必要なテストメソッドを追加します。以下に一例を示します。

<?php

namespace Tests\Feature;

use Tests\TestCase;
use Spatie\Permission\Models\Role;
use Illuminate\Foundation\Testing\RefreshDatabase;

class RoleTest extends TestCase
{
    use RefreshDatabase;

    public function test_a_role_can_be_created()
    {
        $role = Role::create(['name' => 'editor']);

        $this->assertDatabaseHas('roles', ['name' => 'editor']);
    }

    // 他のテストメソッドも同様に追加します...
}

このテストケースでは、ロールが正しく作成できることを確認しています。

最後に、テストを実行します。

php artisan test

これで、テストの作成と実行が完了しました。次のステップでは、まとめを行います。

まとめ

このチュートリアルでは、LaravelとVue.jsを使用してロールとパーミッションの管理システムを作成する方法を学びました。以下に、主なステップをまとめます。

  1. Laravel 9とVue.jsのインストール: Laravelプロジェクトを作成し、Laravel UIパッケージを使用してVue.jsをインストールしました。

  2. spatie/laravel-permissionパッケージのインストール: ロールとパーミッションを管理するためのパッケージをインストールしました。

  3. モデルの作成と更新: UserモデルにHasRolesトレイトを使用して、ロールとパーミッションを管理するメソッドを追加しました。

  4. ルートの作成: ユーザーがブラウザで特定のURLにアクセスしたときに、どのコントローラーとメソッドが呼び出されるかを定義しました。

  5. コントローラーの作成: ロールの作成、更新、削除などのアクションを処理するRoleControllerを作成しました。

  6. Vueファイルの作成と更新: フロントエンドのコンポーネントを作成し、データの表示とユーザーの操作を処理しました。

  7. ロールとパーミッションのためのシーダーファイルの作成: ロールとパーミッションの初期データを作成するためのシーダーファイルを作成しました。

  8. テスト: すべての機能が正しく動作していることを確認するために、テストを行いました。

以上が、LaravelとVue.jsを用いたロールとパーミッションのチュートリアルのまとめです。この知識を活用して、さまざまなWebアプリケーションの開発に役立ててください。それでは、次回もお楽しみに！

Related Posts

コメントを送信

You May Have Missed