Question

我想在我的项目中使用Laravel Passport，我已经遵循了Laravel Passport https://laravel.com/docs/5.3/passport的本教程。

按照本教程后，我收到未捕获的ReferenceError：require is not defined 错误。

请查看我的文件：

gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');

elixir(function(mix) {

    mix.scripts('app.js');

    mix.styles([
                'bootstrap.min.css',
                'font-awesome.min.css',
                'gentelella.min.css'
               ],'public/css/app.css');

});

资源/资产/ JS / app.js

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const app = new Vue({
    el: '#manage-passport'
});

home.blade.php

@extends('layouts.blank')
@section('content')

<div class="container" id="manage-passport">

  <!-- let people make clients -->
    <passport-clients></passport-clients>

    <!-- list of clients people have authorized to access our account -->
    <passport-authorized-clients></passport-authorized-clients>

    <!-- make it simple to generate a token right in the UI to play with -->
    <passport-personal-access-tokens></passport-personal-access-tokens>
</div>

@stop

blank.blade.php

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Passport! | </title>

    <meta name="token" id="token" value="{{ csrf_token() }}">
    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">

</head>

<body class="nav-md">
    <div class="container body">
        <div class="main_container">
            @yield('content')
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="js/gentelella.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>

    @stack('scripts')

</body>

Answer 1

在没有令牌的情况下可能存在问题？

blank.blade.php

<script>
        window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!}
</script>

另外，检查是否传输参数如令牌

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

在app.js中没有为laravel护照定义require

1 个答案: