如何使用Laravel Api路由和Vue 2 Js和Vue路由器对用户进行身份验证

Question

我的目标是laravel为我们提供了一个实施的授权提供程序

https://laravel.com/docs/5.3/authentication

所以我想通过API使用它来验证我的用户并将其设置回我的Vue路由器

并授权用户

我该如何实施呢？

我总是在身份验证上出错

我使用axios作为我的HTTP提供者

这是app.js

require('./bootstrap');

import VueRouter from 'vue-router';

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.use(VueRouter);

axios.defaults.baseURL = '/api';
axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
import LoginForm from './components/LoginForm.vue';

import RegisterForm from './components/RegisterForm.vue';

Vue.component('login-form',LoginForm)

Vue.component('register-form',RegisterForm)
// Directives

const routes = [
  { path: '/', component: require('./pages/Index.vue') },
  { path: '/admin/users', component: require('./pages/admin/Users.vue') },

  { path: '/user/:id', component: require('./pages/user/Dashboard.vue'),
    children: [
      // UserHome will be rendered inside User's <router-view>
      // when /user/:id is matched
      { path: '', component: require('./pages/user/Index.vue')},

      // UserPosts will be rendered inside User's <router-view>
      // when /user/:id/posts is matched
      { path: 'settings', component: { template: '<div>Settings</div>' } },
    ]
  },

  { path: '/manager/:id', component: require('./pages/user/Dashboard.vue'),
    children: [
      // UserHome will be rendered inside User's <router-view>
      // when /user/:id is matched
      { path: '', component: require('./pages/user/Index.vue')},

      // UserPosts will be rendered inside User's <router-view>
      // when /user/:id/posts is matched
      { path: 'settings', component: require('./pages/user/Settings.vue') },
    ]
  },
  { path: '/store/:id', component: require('./pages/user/Dashboard.vue'),
    children: [
      // UserHome will be rendered inside User's <router-view>
      // when /user/:id is matched
      { path: '', component: require('./pages/user/Index.vue')},

      // UserPosts will be rendered inside User's <router-view>
      // when /user/:id/posts is matched
      { path: 'settings', component: { template: '<div>Settings</div>' } },
    ]
  },
  { path: '/*', component: require('./pages/404.vue') },
];

const router = new VueRouter({
  routes,
});

const app = new Vue({
  el: '#app',
  router,
  template: `<div id="#app">
        <router-view></router-view>
    </div>`,

})

这是一个登录表单组件

<template>
    <form class="form" @submit.prevent='submitForm'>
        <div class="form-group">
            <input type="email" class="form-control" name="email" v-model="login.email" placeholder="Email"> 
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="password" v-model="login.password" placeholder="Password"> 
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-info btn-block"> Login </button>
        </div>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                errors: [],
                login: {
                    email: '',
                    password: '',
                    _token: window.Laravel.csrfToken

                }
            }
        },

        methods: {
            submitForm() {
                this.axios.post('/login',this.login)
                    .then(response => {

                    })
                    .catch(response => {
                    })
            }
        }
    }
</script>

这是我的Laravel API

在api.php中

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::group(['middleware' => 'auth'], function () {

Route::get('/auth',function() {
   return Auth::user(); 
});
Route::resource('/users','UserController');

Route::resource('/stores','StoreController');

Route::resource('/items','ItemController');

Route::resource('/transactions','StoreController');

Route::resource('/managers','ManagerController');

Route::resource('/employees','EmployeeController');

Route::resource('/customers','CustomerController');

Route::resource('/tags','TagController');

});

Route::group(['middleware' => 'web'], function() {
    Auth::routes();
});

所以我的BIG PROBLEM这里是使用vue进行身份验证我习惯于在刀片模板和laravel路由中进行身份验证，但不是在vue上进行身份验证