Laravel + vue-router вложенные маршруты перекрывают api маршруты

Question

Я пишу spa приложение на laravel vue. Чтобы управлять маршрутами через vue в laravel web.php я прописал следующее:

<?php
Route::any( '/{any}', function(){
    return view('index');
})->where('any', '.*');

В файле api.php находятся маршруты от api, что понятно. То есть до них можно достучаться так poorbirds.com/api/route

Но, когда в приложении я перехожу по вложенным роутам, например poorbirds.com/admin_area/birds; то в местах, где я обращаюсь к апи, например: /api/birds; мне возвращается вместо json, который я ожидаю, html главной страницы.

Если сделать запрос к апи, например с такой страницы poorbirds.com/birds, то мне приходит то, что надо

Запросы к апи я посылаю через axios

axios.get('api/auth/check_auth')

Я так понимаю проблема в web.php, но что...

Вот api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::apiResource('birds', 'api\BirdsController');

Route::group([

    'middleware' => 'api',
    'prefix'     => 'auth',

], function ($router) {

    Route::post('register', 'AuthController@register');
    Route::post('login', 'AuthController@login')->name('login');
    Route::get('logout', 'AuthController@logout');
    Route::get('user', 'AuthController@user');
    Route::get('check_auth', 'AuthController@checkAuth');

});

Answer 1

Для того чтобы они не были перекрытыми, вам нужно сделать их разделение на уровне провайдера, так как это есть в примере базового проекта Laravel с использованием префикса.

<?php

class RouteServiceProvider extends ServiceProvider
{
/**
 * This namespace is applied to your controller routes.
 *
 * In addition, it is set as the URL generator's root namespace.
 *
 * @var string
 */
protected $namespace = 'App\Http\Controllers';

/**
 * Define your route model bindings, pattern filters, etc.
 *
 * @return void
 */
public function boot()
{
    //

    parent::boot();
}

/**
 * Define the routes for the application.
 *
 * @return void
 */
public function map()
{
    $this->mapWebRoutes();

    $this->mapApiRoutes();

    //
}

/**
 * Define the "web" routes for the application.
 *
 * These routes all receive session state, CSRF protection, etc.
 *
 * @return void
 */
protected function mapWebRoutes()
{
    Route::group([
        'middleware' => 'web',
        'namespace' => $this->namespace,
    ], function ($router) {
        require base_path('routes/web.php');
    });
}

/**
 * Define the "api" routes for the application.
 *
 * These routes are typically stateless.
 *
 * @return void
 */
protected function mapApiRoutes()
{
    Route::group([
        'middleware' => 'api',
        'namespace' => $this->namespace,
        'prefix' => 'api',
    ], function ($router) {
        require base_path('routes/api.php');
    });
}

}

Answer 2

Посмотрев response, который возвращает сервер, я увидел, что requestURL = http://127.0.0.1:8000/admin_area/api/auth/check_auth (Запрос отправлял с http://127.0.0.1:8000/admin_area/birds) ТО есть получается, что он добавил лишнее "звено" - admin_area

Чтобы это исправить, нужно прописать baseURL для axios

axios.defaults.baseURL = 'http://127.0.0.1:8000';

БЛОГ НА HUSL

Laravel + vue-router вложенные маршруты перекрывают api маршруты

Ответы (2 шт):