如何一起使用Laravel 认证和vue-router

Question

总的来说，我是 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');

但是，我还有一个 routes.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 的链接。它只是显示为普通文本。但现在我的首要任务是路由问题。

Answer 1

你可以结合 vue 路由和 Laravel 路由。但是为了获得最好的结果，我建议你使用 vue 路由器，因为你正在构建一个水疗中心。

删除

Route::get('/', function () {
    return view('app');
});

将所有后端路由放在指向你的 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 路由没有冲突。希望对您有所帮助。

Answer 2

接受的答案是完美的（我投了赞成票，但我还没有代表可以计算）并且对我来说效果很好，但前提是我还创建了 'dummy' 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 },

Answer 3

你可以直接用这个

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

如何一起使用Laravel 认证和vue-router

How to use Laravel authentication and vue-router together

routes

laravel

vue.js

laravel-5

vue-router