vue.js - Laravel 5.6 + vue.js 应用路由器 + laravel 护照

Question

我正在测试 Laravel5.6+Vue 应用程序，我已经激活了 Laravel Auth 和 Passport。

我的项目：

• API 使用 Laravel Passport。

• Web Laravel 身份验证处于活动状态。

• Vue 应用程序

由于 Laravel Auth 处于活动状态，似乎 Auth 触发并验证用户会话，无论他是否登录并重定向到 Auth /login 路由。

当我在 web.php 中禁用身份验证路由时，会发生错误。

// Auth::routes();

错误

InvalidArgumentException
Route [login] not defined.

由于我使用 Vue 应用程序和 Laravel API 和 Passport，如何避免 Laravel Web Auth 验证 Vue 应用程序？

网页.php

Auth::routes();
Route::get('{any}', 'HomeController@index')->name('home')->where('any','.*');

api.php

    Route::group([
        'prefix' => 'auth'
    ], function () {
        Route::group(['middleware' => 'auth:api'], function() {
            Route::get('logout', 'API\AuthController@logout');
            Route::get('user', 'API\AuthController@user');

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

        Route::get('/application/all', 'ApplicationController@index');

    });

    Route::post('/auth/login', 'API\AuthController@login');
    Route::post('/auth/register', 'API\AuthController@register');

Vue

路由.js

从 './components/Home.vue' 导入主页；

    import Login from './components/auth/Login.vue';
    import Logout from './components/auth/Logout.vue';
    import Profile from './components/auth/Profile.vue';
    import Register from './components/auth/Register.vue';

    import ApplicationList from './components/content-app/ApplicationList.vue';


    export const routes = [
        {
            path: '/',
            component: Home,
            meta: {
                requiresVisitor: true,
            }
        },
        {
            name: 'user-login',
            path: '/user/login',
            component: Login,
            meta: {
                requiresVisitor: true,
            }
        },
        {
            name: 'user-register', 
            path: '/user/register',
            component: Register,
            meta: {
                requiresVisitor: true,
            }
        },
        {
            name: 'user-profile', 
            path: '/user/profile',
            component: Profile,
            meta: {
                requiresAuth: true,
            }
        },
        {
            path: '/logout',
            component: Logout,
            meta: {
                requiresAuth: true,
            }
        },
        {
            path: '/content/application-list',
            component: ApplicationList,
            meta: {
                requiresAuth: true,
            }
        }
    ];

应用程序.js

要求（'./bootstrap'）；

  import Vue from 'vue';
  import VueRouter from 'vue-router';
  import Vuex from 'vuex';
  import axios from 'axios'

  import {routes} from './routes';
  import StoreDate from './store';
  import MainApp from './components/MailApp.vue';


  Vue.use(VueRouter);
  Vue.use(Vuex);

  const store = new Vuex.Store(StoreDate);

  const router = new VueRouter({
      routes,
      mode: 'history'
  });

  router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      // this route requires auth, check if logged in
      // if not, redirect to login page.
      if (!store.getters.loggedIn) {
        next({
          path: '/login',
          query: { auth: 'unauthenticated' } //query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (store.getters.loggedIn && (to.path == '/login' || to.path == '/register')) {
        next({
          path: '/profile',
        })
      } else {
        next()
      }
    } else {
      next() // make sure to always call next()!
    }
  })


  const app = new Vue({
      el: '#app',
      router,
      store,
      components: {
          MainApp
      }
  });


  /////////  OVER WRITING JS
  $('.navbar-nav>li>a').on('click', function(){
      $('.navbar-collapse').collapse('hide');
  });
  $('.navbar-nav>navbar-brand').on('click', function(){
      $('.navbar-collapse').collapse('hide');
  });

标签： vue.jslaravel-5.6