كيف يمكنني استخدام Jetstream وLivewire في Laravel كـ API للتفاعل مع تطبيق React.js؟

عليك أولاً تثبيت Laravel Sanctum وتكوينه لتوفير ميزات المصادقة،  بتشغيل الأوامر:

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

ثم تكوين ملف config/cors.php للسماح للمتصفح بتبادل الموارد عبر المواقع CORS (Cross-Origin Resource Sharing)، بتنفيذ التالي لنشر ملفات التكوين:

composer require fruitcake/laravel-cors

php artisan vendor:publish --tag="cors"

بعد ذلك تأكد من أن Jetstream يستخدم Sanctum كـ API حسب الحاجة، وقم بفحص ملف config/jetstream.php وتحقق من أن خيار stack يتم تعيينه إلى livewire أو inertia.

نأتي الآن لخطوة تكوين حماية Sanctum Middleware، ففي ملف app/Http/Kernel.php، يجب أن يكون EnsureFrontendRequestsAreStateful middleware موجود في مجموعة web middleware.

وفي ملف config/sanctum.php، عليك تكوين stateful لـ sanctum بحيث تكون هناك علامة تحقق للمتصفح.

والآن قم بإنشاء نقاط النهاية (controllers) الخاصة بك للعمليات التي تحتاج إليها، وضع middleware auth:sanctum في النقاط التي تتطلب مصادقة المستخدم.

مثال على ملف routes/api.php:

use App\Http\Controllers\Api\PostController;

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/posts', [PostController::class, 'index']);
    // يمكنك إضافة طرق إضافية هنا
});

وكمثال سنقوم بإنشاء app/Http/Controllers/Api/PostController.php:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return response()->json($posts);
    }

    // يمكنك إضافة المزيد من الوظائف مثل store وupdate وdelete حسب الحاجة.
}

في مشروع React.js، تستطيع استخدام fetch أو Axios لاستدعاء نقاط النهاية API:

import React, { useEffect, useState } from 'react';

function App() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        fetch('/api/posts')
            .then(response => response.json())
            .then(data => setPosts(data));
    }, []);

    return (
        <div>
            <h1>Posts</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

بتاريخ 6 ساعة قال Mustafa Suleiman:

عليك أولاً تثبيت Laravel Sanctum وتكوينه لتوفير ميزات المصادقة،  بتشغيل الأوامر:

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

ثم تكوين ملف config/cors.php للسماح للمتصفح بتبادل الموارد عبر المواقع CORS (Cross-Origin Resource Sharing)، بتنفيذ التالي لنشر ملفات التكوين:

composer require fruitcake/laravel-cors

php artisan vendor:publish --tag="cors"

بعد ذلك تأكد من أن Jetstream يستخدم Sanctum كـ API حسب الحاجة، وقم بفحص ملف config/jetstream.php وتحقق من أن خيار stack يتم تعيينه إلى livewire أو inertia.

نأتي الآن لخطوة تكوين حماية Sanctum Middleware، ففي ملف app/Http/Kernel.php، يجب أن يكون EnsureFrontendRequestsAreStateful middleware موجود في مجموعة web middleware.

وفي ملف config/sanctum.php، عليك تكوين stateful لـ sanctum بحيث تكون هناك علامة تحقق للمتصفح.

والآن قم بإنشاء نقاط النهاية (controllers) الخاصة بك للعمليات التي تحتاج إليها، وضع middleware auth:sanctum في النقاط التي تتطلب مصادقة المستخدم.

مثال على ملف routes/api.php:

use App\Http\Controllers\Api\PostController;

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/posts', [PostController::class, 'index']);
    // يمكنك إضافة طرق إضافية هنا
});

وكمثال سنقوم بإنشاء app/Http/Controllers/Api/PostController.php:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return response()->json($posts);
    }

    // يمكنك إضافة المزيد من الوظائف مثل store وupdate وdelete حسب الحاجة.
}

 

في مشروع React.js، تستطيع استخدام fetch أو Axios لاستدعاء نقاط النهاية API:

import React, { useEffect, useState } from 'react';

function App() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        fetch('/api/posts')
            .then(response => response.json())
            .then(data => setPosts(data));
    }, []);

    return (
        <div>
            <h1>Posts</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

 

للاسف بواجه مشكله في الامر composer require fruitcake/laravel-cors و ال package مش راضيه تتحمل