Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Laravel Route ve Vue Router Kullanımı Hakkında

BoraN7

Merhaba arkadaşlar,

Udemy üzerinden Vue JS'i ve Laravel ile nasıl kullanacağımızı öğreten yabancı bir kurs tamamladım. Kafama takılan bir kaç soru hakkında size danışmak istedim.

Eğitmen routes/web.php içerisinde şöyle bir tanımlama yaptı;

Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');

Şimdi burada api/ hariç her şeyi kabul ederek welcome.blade'e gönderiyor. Oradan da Vue JS devralıyor. Vue Router'da tanımlı. Buraya kadar bir problem yok.

Örnek api route (routes/api.php);

Route::apiResource('bookables','Api\BookableController')->only(['index','show']);

Api\BookableController:

<?php

namespace App\Http\Controllers\Api;

use App\Bookable;
use App\Http\Controllers\Controller;
use App\Http\Resources\BookableIndexResource;
use App\Http\Resources\BookableShowResource;
use Illuminate\Http\Request;

class BookableController extends Controller
{
    public function index(Request $request)
    {
        return BookableIndexResource::collection(Bookable::all());
        
    }

    public function show(Request $request, $id)
    {
        return new BookableShowResource(Bookable::findOrFail($id));
    }
}

Şimdi burada her şey normal çalışıyor. Ancak ben gidip tarayıcımın URL'inde doğrudan api/bookables yazarak gitmeye çalışırsam çirkin bir şekilde bütün veriler JSON formatında browserda görüntüleniyor.

Aslında Vue Router ile rotalarımı tanımladığım alanda tüm rotaların sonunda şu şekilde bir 404'de ayarladım:

{
        path:"*",
        component: NotFound,
        name: "notfound"
    }

Ben istiyorum ki api/ ile bir GET isteği yapamasın tarayıcıdan. Onları zaten axios ile Vue template içerisinde ben gönderiyorum.

Aklıma ilk gelen çözüm şu oldu;

public function index(Request $request)
    {
         if ($request->isXmlHttpRequest()) {
             return BookableIndexResource::collection(
                Bookable::all()
            );
         } else {
             return view('welcome');
         }
    }

Ama bu sefer Api Controllerım içinde her action için if tanımlaması yapmam gerekecek. Bunun farklı bir yolu var mıdır?

Biraz uzun oldu, kusura bakmayın.

Şimdiden teşekkürler 🙂

yalcin

BoraN7 Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^?!api\/[\/\w.\,-]*');

BoraN7 Şimdi burada api/ hariç her şeyi kabul ederek welcome.blade’e gönderiyor. Oradan da Vue JS devralıyor. Vue Router’da tanımlı. Buraya kadar bir problem yok.

ben şöyle kullanıyorum

 Route::get('/{vue_capture?}',function () {
        return view('welcome');
    })->where('vue_capture', '[\/\w\.-]*');

api hariç herşey kabul etmesi kısmını anlamadım , neden api ifadesini regex'e eklemek istiyeyimki ne var ne yok vue router'a yolla yani welcome.blade yolla ki ordada <router-view></router-view> çalışıyo yani urldeki adres rotalarda varsa vardır yoksa yoktur . değilmi ? "api" ifadesinide eklemelimiyim ?

coder2

Konuya tam hakim değilim fakat $request->isXmlHttpRequest() kontrolü işinizi görüyorsa middleware yazarak RouteServiceProvider üzerinden api route leri tanımladığınız method/sayfa daki tüm route lere eklemek çözüm olabilir.

BoraN7

coder2 Kernel'den 'api' middleware groups'lara ekleyeyim dedim hata verdi. Şöyle bir şey yaptım işe yarıyor gibi görünüyor ama performansı düşürür mü ya da daha doğru bir yolu var mı belki daha tecrübeli arkadaşlar fikir verebilir.

Önerinizden yola çıkarak şöyle bir şey kurguladım.
app/Http/Middleware/isRequestComingFromVue.php;

<?php

namespace App\Http\Middleware;

use Closure;

class isRequestComingFromVue
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (!$request->isXmlHttpRequest()) {

            return response()->view('welcome');
        }
        return $next($request);
    }
}

Ardından Kernel içerisinde protected $routeMiddleware kısmına ekledim.
Son olarak routes/api.php içerisinde;
use App\Http\Middleware\isRequestComingFromVue;

Route::middleware([isRequestComingFromVue::class])->group(function () {

//api rotaları...
});

Şu an her şey çalışıyor gibi görünüyor. Ama dediğim gibi farklı ya da daha doğru yollar varsa, önerilere açığım. 🙂

coder2

BoraN7 Bu şekilde kullanabilirsiniz.

Eğer api rotalarının olduğu sayfada yazmak istemiyorsanız RouteServiceProvider içinde aşağıdaki formatta yazabilirsiniz:

protected function mapApiRoutes()
{
    Route::prefix('api')
        ->middleware(["api", "burayaMiddlewareNameGelecek"])
        ->namespace($this->namespace)
        ->group(base_path('routes/api.php'));
}

mgsmus

BoraN7 Eğer siz bir yerde link vermediyseniz api rotanızı teknik bilgisi olmayanlar bilmez. Teknik bilgisi olan kişi de zaten tarayıcının konsolundan bakar her şeyi görür. Ben bunun neyi çözdüğünü anlamadım 🙂

BoraN7

coder2 Teşekkür ederim yardımın için.
Bir şey daha danışmak istiyorum hocam size;
Şimdi eğitmenin web.php içerisindeki tanımlaması;

Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');

Ben bunu şu şekilde güncelledim:

Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '(.*?)')->name('master.blade');

Regex kısmında pek iyi değilim de. Yapmak istediğim şu, üstteki şekliyle kullanırsam ve
http://127.0.0.1:8000/; gibi saçma bir rotaya gitmek istersem ';' işareti tanımsız olduğundan beni Laravel'in 404.blade'ine redirect ediyor.

Ben istiyorum ki her şeyi kabul etsin. Zaten Vue Router içerisinde ben tüm rotalarımı tanımladım. En sona da (fallback route gibi düşünebilirsin) içerideki rotalar ile eşleşmeyen her rota için kendi 404 vue componentime yönlendirme yaptırıyorum. Güncellediğim rotada regex kısmı bu şekilde kullanılabilir mi?

coder2

BoraN7 fallback methodu ile tanımsız route yollarında ne yapılacağını override edebilirsiniz hocam:

Route::fallback(function () {
    return "404 e gitmez burası gelir.";
});

BoraN7

mgsmus Bir şeyi çözmek için değil de estetik kaygı hocam. 🙂
Yani api/bookables olarak GET isteği atarak verileri çekip ekrana basmak tamam da, dediğiniz gibi konsoldan gören birisi direkt tarayıcıya yazarak görmesin diye.
Görmesinden bir zarar olduğu da değil, zaten Resource oluştururken istediğimiz verileri gönderiyoruz da, dediğim gibi estetik olarak yapmak istedim 🙂

Hocam bir de yukarıda yazdığım gibi eğitmen web.php'de şöyle tanımladı:

Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');

Ama ben istiyorum ki her şeyi kabul etsin. Zaten Vue Router'da tanımlı rotalara gitmezse en sonda 404 componentime yönlendiriyorum. Dolayısıyla şöyle düzenledim. Burada hatalı bir durum olur mu?

Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '(.*?)')->name('master.blade');