Laravel 12 ile oluşturduğum, rol tabanlı ve modül tabanlı bir CMS geliştirdim. Bu sistem, kullanıcıların birden fazla rolü olabileceği ve erişimlerinin atanan modüller ve bileşenlere göre dinamik bir şekilde kontrol edildiği ince granüllü izinleri desteklemektedir. Kimlik doğrulama, Laravel Sanctum ile güvenli bir şekilde yapılırken, ön yüz modern ve reaktif bir deneyim için Composition API’yi kullanmaktadır.
<p>Tam projeyi GitHub'da keşfedebilir ve buradan deneyebilirsiniz: <a href="https://github.com/malickfaisal/cms-permission-vue-laravel" target="_blank" rel="noopener noreferrer">cms-permission-vue-laravel</a></p>
<strong>Adım 1: Sanctum'u API Kimlik Doğrulama için Kurun</strong><br/>
<p>Spatie Laravel Permission paketini kullanacağız. Bu paket yaygın olarak kullanılmakta ve test edilmiştir.</p>
<strong>1.</strong> Laravel Sanctum'u yükleyin:<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>composer require laravel/sanctum
use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema;
return new class extends Migration { public function up(): void { Schema::create(‘modules’, function (Blueprint $table) { $table-?>id(); $table->string(‘name’); $table->string(‘slug’); }); }
public function down(): void
{
Schema::dropIfExists('modules');
}
<strong>2.</strong> Bileşenler için Göç<br/>Göç dosyasını güncelleyin: database/migrations/xxxx_xx_xx_xxxx_create_modules_components_table.php<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code><?php use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema;
return new class extends Migration { public function up(): void { Schema::create(‘modules_components’, function (Blueprint $table) { $table-?>id(); $table->unsignedBigInteger(‘module_id’); $table->string(‘name’); $table->string(‘slug’); // Unik değil $table->timestamps(); $table->foreign(‘module_id’) ->references(‘id’) ->on(‘modules’) ->onDelete(‘cascade’); }); }
public function down(): void
{
Schema::dropIfExists('modules_components');
}
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema;
return new class extends Migration { public function up(): void { Schema::table(‘permissions’, function (Blueprint $table) { $table-?>unsignedBigInteger(‘module_id’)->after(‘id’); $table->unsignedBigInteger(‘component_id’)->after(‘module_id’); $table->string(‘label’)->after(‘component_id’); }); }
public function down(): void
{
Schema::table('permissions', function (Blueprint $table) {
$table->dropColumn('module_id');
$table->dropColumn('component_id');
$table->dropColumn('label');
});
}
};
<strong>4.</strong> Modül, Bileşen ve İzinler için Modeller Oluşturun<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>php artisan make:model Module
use App\Models\User; use App\Models\Modules\Module; use App\Models\Modules\ModuleComponent; use App\Models\Modules\Permission; use App\Models\Modules\ModuleHasPermission; use Spatie\Permission\Models\Role; use Illuminate\Support\Facades\Hash; use Illuminate\Database\Seeder;
class DatabaseNewSeeder extends Seeder { public function run(): void { $user = User::factory()-?>create([ ‘name’ => ‘Test Admin’, ’email’ => ‘[email protected]’, ‘password’ => Hash::make(‘12345678’), ]);
use App\Models\User; use Illuminate\Support\Facades\Hash; use Illuminate\Validation\ValidationException; use Illuminate\Http\Request; use Illuminate\Support\Facades\Auth;
class AuthController extends Controller { public function login(Request $request) { $request-?>validate([ ’email’=>’required|email’, ‘password’=>’required’ ]);
use App\Models\User; use Illuminate\Support\Facades\Hash; use Illuminate\Validation\Rule; use Illuminate\Validation\ValidationException; use Illuminate\Http\Request;
class UserController extends Controller { public function index() { $users = User::get(); return response()-?>json($users, 200); }
use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Models\Modules\Module; use App\Models\Modules\ModuleComponent; use App\Models\Modules\Permission; use App\Models\Modules\ModuleHasPermission;
class ModuleController extends Controller { public function index() { $modules = Module::get(); foreach($modules as $key =?> $row){ $data[‘module_id’] = $row->id; $data[‘module_name’] = $row->label; $permissions = Permission::where(‘module_id’, $row->id)->get(); $data[‘module_permissions’] = $permissions; } return response()->json($module, 201); }
use Illuminate\Support\Facades\Route; use App\Http\Controllers\AuthController; use App\Http\Controllers\UserController; use App\Http\Controllers\ModuleController;
<hr/>
<strong>Adım 6: Vue 3 Ön Yüzünü Kurun</strong><br/>
<strong>1.</strong> Bir Vue 3 projesi oluşturun (aynı veya başka bir klasöre):<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>npm create vite@latest frontend
cd frontend npm install npm install axios pinia vue-router
<strong>2.</strong> Axios API Global Konfigürasyonu<br/>src/stores/api.js<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>import axios from 'axios';
<strong>4.</strong> Vue Router ile Auth Guard<br/>src/router/index.js<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from ‘../stores/auth’; import { usePermissionStore } from ‘../stores/permission’ import Login from ‘../views/Login.vue’; import Dashboard from ‘../views/Dashboard.vue’; import Task from ‘../views/Task.vue’;
<strong>Adım 7: Her Şeyi Test Edin</strong><br/>Laravel API'yi çalıştırın:<br/>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>php artisan serve
<p>Vue 3 ön yüzünü çalıştırın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>npm run dev
<p><strong>GitHub:</strong><br/>Laravel 12, Vue 3 ve Tailwind CSS ile oluşturulmuş CMS İzin Sistemi'ni GitHub'da kontrol edin: <br/><a href="https://github.com/malickfaisal/cms-permission-vue-laravel" target="_blank" rel="noopener noreferrer">https://github.com/malickfaisal/cms-permission-vue-laravel</a><br/>Kodları keşfedin, deneyin ve rol tabanlı & modül tabanlı izinlerin nasıl çalıştığını görün!</p>