2016-12-06 12 views
1

私は、認証ミドルウェアを使用してAPIルートから最新の問題を取得するために、Vueを使用してajaxリクエストを作成しようとしています。私は認証をチェックせずに動作させることができましたが、認証をチェックし、リクエストを作成しているユーザーIDも取得する必要があります。私は現在これを持っています。 マイビュー:Laravel AJAXルートへのリクエストVueエラー

<script type="text/javascript"> 
$.ajaxSetup({ 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    } 
}); 
</script> 
<script src="/public/js/adminApp.js"></script> 
<template id="messages-template"> 
    <div> 
    <ul class="menu" v-for="messages in list"> 
     <li><!-- start message --> 
     <a href="#"> 
      <div class="pull-left" style="margin-left: 9px;margin-right: 9px;"> 
      <i class="fa fa-pencil"></i> 
      </div> 
      <h4>@{{ messages && messages.name }} 
      <small><i class="fa fa-clock-o"></i> 5 mins</small> 
      </h4> 
     </a> 
     </li> 
    </div> 
    </div> 
</template> 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script type="text/javascript" src="/public/js/messages.js"> 
</script> 

マイ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:api']], function() { 
    Route::get('/test', function (Request $request) { 
    return App\issue::latest()->get(); 
    }); 
}); 

マイmessages.jsのVUEスクリプト:

Vue.component('messages', { 
    template: '#messages-template', 
    data: function(){ 
    return { 
    list:[] 
    };}, 
    created(){ 
    $.getJSON('/api/test', function(messages){ 
     this.list = messages; 
    }.bind(this)) 
    } 
}); 

new Vue({ 
    el: '#messagesArea' 
}); 

は、私は現在、取得エラーメッセージが401で、ルートがあります返品する:{"error":"Unauthenticated."}

+0

このルートが属しているグループに 'auth:api'ミドルウェアを指定しました。おそらく、要求のある種類のトークンを期待しているでしょう。あなたは1つを提供していないので、認証できません。 –

+0

私は:$ .ajaxSetupは、メタからトークンを取得する必要があると思っていました。なぜなら、それは私が@ ZacBrownのどこにあるのでしょうか。 – RPSystems

+0

ああ、そうです。ごめんなさい。それを捕まえていない。私は@ asemahleの答えはあなたが探しているものだと思う。 –

答えて

0

書いたもの:

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 

これは、その名csrf-tokenある<meta>要素、探し、contentを解析します。そのためには、文書の先頭にそのmetaタグを追加する必要があります。これを試してください:

<meta id="token" name="csrf-token" content="{{ csrf_token() }}"> 
+0

私はちょうどそれを追加しました。まだ401未認証エラー@asemahleを取得しました – RPSystems

+0

'$( 'meta [name =" csrf-token "]')。attr( 'content')'が動作していることを確認できますか?それをコンソールで実行してみてください。それはcsrfトークンの値を出力するはずです。 – asemahle

+0

[コンソールログ](http://imgur.com/a/NcWbA)ここに行きます。 – RPSystems

関連する問題