如何同时使用Laravel身份验证和Vue路由器

时间:2019-03-23 21:05:00

标签: laravel laravel-5 vue.js routes vue-router

我一般来说是Laravel和PHP的新手,但是熟悉Vue和SPA。例如,我知道如何使用Bcrypt创建身份验证。但是,我使用Laravel运行php artisan make:auth并为后端创建了几个不同的端点。

我试图使用Vue将应用程序转换为SPA,但是将路由与Vue一起使用会导致web.php中定义的路由出现问题。例如,我有这样的web.php,它有几种不同的路由。

<?php

Route::get('/{vue_capture?}', function () {
    return view('app');
 })->where('vue_capture', '^(?!storage).*$'); 

Route::get('/', function () {
    return view('app');
});
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController@search')->middleware('auth');

Auth::routes();

Route::get('/settings/account', 'AccountsController@edit')->middleware('auth');
Route::get('/auth', 'AccountsController@get');
Route::put('/settings/account', 'AccountsController@update')->middleware('auth');

但是,我还有一个route.js,可以让vue-router通过以下方式处理路由:

import Home from './components/Home.vue'
import Videos from './components/Videos.vue'
import Categories from './components/Categories.vue'

export default{
    mode: 'history',


    routes: [
        {
            path:'/',
            component:Home
        },

        {
            path:'/Videos',
            component:Videos
        },
        {
            path:'/Categories',
            component:Categories
        },
        {
            path:'/login',
            component:login
        },
        {
            path:'/register',
            component:register
        },
        {
            path:'/logout',
            component:logout
        }
    ]
}

我了解,如果您使用SPA,Vue应该会接管路由,但是有什么办法可以同时使用两者?我找不到能解决此问题的任何东西,但我无法相信Laravel会让您选择使用php artisan make:auth之类的内置命令,还是必须全部删除并手动完成所有操作想要带有路由的SPA。

我已经尝试过使用Laravel和Vue进行不同的CRUD培训。 我尝试将所有路由定向到Vue,以让vue-router处理路由。 我尝试不将所有路由都分配给vue-router,并保留在web.php中拥有的后端路由

其他半相关的问题是我的路线甚至都没有显示为使用router-link的链接。它只是显示为普通文本。但是目前,我的首要任务是路由问题。

3 个答案:

答案 0 :(得分:0)

您可以结合使用vue路线和Laravel路线。但是为了获得最佳结果,我建议您使用vue路由器,因为您正在构建温泉。

  1. 删除
Route::get('/', function () {
    return view('app');
});
  1. 将所有后端路由放在指向您的vue的路由之前。
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController@search')->middleware('auth');

Auth::routes();

Route::get('/settings/account', 'AccountsController@edit')->middleware('auth');
Route::get('/auth', 'AccountsController@get');
Route::put('/settings/account', 'AccountsController@update')->middleware('auth');

Route::get('/{vue_capture?}', function () {
    return view('app');
 })->where('vue_capture', '^(?!storage).*$'); 

另外,请验证后端上没有冲突的路由(运行php artisan route:list以查看laravel路由列表)和vue路由。我希望这会有所帮助。

答案 1 :(得分:0)

被接受的答案是完美的(我赞成,但我现在还没有代表要回答),并且对我来说效果很好,但前提是要同时创建“虚拟” vue组件并将其导入以与路线配合使用。希望这会有所帮助!

import Login from './auth/Login'
import Register from './auth/Register'
import Logout from './auth/Logout'

{ path:'/login', component:Login },
{ path:'/register', component:Register },
{ path:'/logout', component:Logout },

答案 2 :(得分:0)

你可以用这个代替

Route::get('/{vue_capture?}', function () {
    return view('app');
 })->where('vue_capture', '^(?!storage).*$')->middleware('auth');