2

Пишу веб приложение по бронированию, использую лару для этого дела. Тут появилась идейка запилить админку как spa, а остальные части проекта будут как mpa. Возможно ли такое реализовать на одном домене? То есть например когда мы обратимся http://site.ru/admin то все роуты которые будут образовываться после /admin/.../ с учетом сохранения истории, будут обрабатываться с помощью роутера js фреймворка в моем случае vue. Возможно как-то такое запилить ? Сейчас я получаю 404 ошибку так как эти роуты обрабатыват ядро лары.

5
  • 1
    Да, возможно, указываете базовый URL + контроллер c магическим методом __invoke
    – user256824
    20 окт 2019 в 18:56
  • При установленном моде mode: 'history' работает в том случае если навигация формируется по тегам <router-link to="posts"></router-link> если набрать из адресной строки .../admin/posts то получаем 404
    – Pavel
    20 окт 2019 в 19:42
  • Получается нужно все роуты созданные во vue - prntscr.com/plxftv продублировать в роутах laravel и направить на один контроллер - prntscr.com/plxg35 ?
    – Pavel
    20 окт 2019 в 19:46
  • Нужно не роуты дублировать, а чтобы сервер на каждый запрос отдавал один и тот же html.
    – Dmytro
    20 окт 2019 в 20:03
  • Как это сделать? На сколько я знаю лара во время обработки get запроса парсит файл web.php регулярками и если там нет совападений с uri то отдается 404.
    – Pavel
    20 окт 2019 в 20:09

1 ответ 1

5

Маршрут routes/web.php:

Route::prefix('panel')
    ->group(function () {
        // Одностраничная административная панель.
        Route::middleware([
                'auth',
            ])
            ->get('/{any?}', 'PanelController')
            ->name('panel');
    });

Контроллер app\Http\Controllers\PanelController.php:

<?php

namespace App\Http\Controllers;

class PanelController extends Controller
{
  /**
   * Единый обработчик маршрутов одностраничного приложения.
   * 
   * @return View
   */
  public function __invoke()
  {
    $scriptVariables = [
      'base_url' => route('panel'),
    ];

    return view('panel', compact('scriptVariables'));
  }
}

Шаблон resources/views/panel.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <title>Панель управления - {{ config('app.name') }}</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{{ mix('/css/panel.css') }}" />
</head>

<body>
    <div id="app"></div>

    <script type="text/javascript">
        window.ScriptVariables = @json($scriptVariables, JSON_PRETTY_PRINT);
    </script>

    <script src="{{ mix('/js/panel.js') }}"></script>
</body>

</html>

Инструкции фронтенд-сборщика webpack.mix.js:

const mix = require('laravel-mix');

mix.webpackConfig({
  resolve: {
    extensions: [
      '.js',
      '.vue',
    ],

    alias: {
      '@': __dirname + '/resources/assets/js'
    }
  }
})

// Разделяем ресурсы для основного сайта
// и раздела административной панели.

.sass('resources/sass/app.sass', 'public/css')
.sass('resources/sass/panel.sass', 'public/css')

.js('resources/js/app.js', 'public/js')
.js('resources/js/panel.js', 'public/js');

JavaScript для одностраничного приложения resources/js/panel.js:

'use strict';

// Подгружаем сторонние зависимости.
require('./bootstrap');

import Vue from 'vue';

// Импортируем плагины.
import store from '@/store';
import router from '@/router';

// Импортируем основной шаблон приложения.
import App from '@/views/layouts/app.vue';

// Создаем Vue приложение и подключаем к странице.
const app = new Vue({
    el: '#app',

    components: {
        'app': App
    },

    router,
    store,

    template: '<app></app>',
});

Не забываем указать базовый URL resources/js/router/index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';

// Устанавливаем плагин глобально.
Vue.use(VueRouter);

// Импортируем маршруты.
import routes from './routes';

// Определяем базовый URL маршрутизатора.
const base_url = `${ScriptVariables.base_url}`
    .replace(/^https?:\//, '')
    .replace(/^\/localhost/, '')

// Инициализируем и экспортируем маршрутизатор.
const router = new VueRouter({
    mode: 'history',
    base: base_url,
    routes: routes,
    linkActiveClass: 'active',
    pathToRegexOptions: {
        strict: true
    },
    scrollBehavior(to, from, savedPosition) {
        return {
            x: 0,
            y: 0
        }
    },
});

export default router;

6
  • 1
    Супер спасибо, прям то что доктор прописал :)
    – Pavel
    21 окт 2019 в 12:17
  • И еще один вопрос к вам будет, т.к. планируется spa только под админку, все остальное будет как обычный сайт и на этих страницах нужно учитывать авторизован ли пользователь, то получается у нас будет два типа авторизации первая по api по токену вторая по сессии, так вот как их подружить?
    – Pavel
    22 окт 2019 в 12:30
  • @Pavel, это уже другой вопрос, а в чем сложность? Там не должно возникнуть сложностей.
    – user256824
    22 окт 2019 в 13:40
  • Ну собственно как одновременно поддерживать для клиента и сессионную авторизацию и токен авторизацию ? Ну можно например пропускать через auth мидлвер запрос на апи и если пользователь залогинен выдавать ему токен, только вот не знаю на сколько это норм решение.
    – Pavel
    22 окт 2019 в 14:16
  • 1
    @Pavel, Пользователь залогинился, передали Bearer токен на фронт, сохранили в localstorage. При последующих запросах передаете этот токен. Выставляете посредника auth:api. laravel.com/docs/6.x/api-authentication#introduction
    – user256824
    22 окт 2019 в 14:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.