如何同时使用Laravel身份验证和Vue-Router [英] How to use Laravel authentication and vue-router together

问题描述

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

I'm new to Laravel and PHP in general, but familiar with Vue and SPA's. I know how to create authentication with Bcrypt, for example. However, I used Laravel to run php artisan make:auth and to create several different endpoints for the backend.

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

I was trying to convert my app into a SPA using Vue, however using routing with Vue causes issues with the routes defined in the web.php. For example, I have my web.php like this, with several different routes.

<?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通过以下方式处理路由:

However, I also have a routes.js to have vue-router handle the routing with the following :

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，则手动完成所有操作.

I understand that Vue is supposed to take over the routing if you use a SPA, but is there any way to use both? I can't find anything that addresses this issue but I can't believe that Laravel would make you choose to either use their built-in commands like php artisan make:auth or have to scrap all of that and do it all manually if you want a SPA with routing.

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

I've tried going through different CRUD turorials on using Laravel and or Vue. I've tried directing all of the routes to Vue to have vue-router handle the routing. I've tried not giving all routing to vue-router and retaining the back-end routes that I had in web.php

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

Other semi-related problem is my routes aren't even appearning as links using router-link . It just appears as normal text. But for now my priority is the routing issue.

推荐答案

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

You can combine both vue route and Laravel route. But for the best result, I advise you use vue router since you are building an spa.

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路由.我希望这会有所帮助.

Also, verify that you don't have conflicting routes on your backend (run php artisan route:list to see your laravel route list) and vue routes. I hope this helps.

这篇关于如何同时使用Laravel身份验证和Vue-Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！