How to use Laravel authentication and vue-router together

4
votes

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.

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');

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
        }
    ]
}

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.

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

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.

3
laravellaravel-5vue.jsroutesvue-router

3 Answers

5
votes

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. remove 
Route::get('/', function () {
    return view('app');
});
  1. put all the backend route before the route that point to your 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).*$');

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.

1
votes

The accepted answer is perfect (I upvoted but I have no rep yet for it to count) and worked well for me but only under the condition if I also created 'dummy' vue components and imported them to work with the routes. Hope this helps!

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 },
0
votes

You can just use this instead

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