اذهب إلى المحتوى
  • 0

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

Moamen Ramy Rahmo

السؤال

انا بستعمل jetstream & livewire في مشروع و عايز ابعته ك api للفرونت (react.js) ايه الخطوات اللي المفروض تتعمل؟

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

عليك أولاً تثبيت 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;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 مش راضيه تتحمل

Screenshot (406).png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...