I am trying to make an ajax request using Vue to get data from an API route using the auth middleware to get recently created issues. I was able to get it to work without checking auth however i need it to check auth and also get the Users id that is creating the request. I currently have this. My view:

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

My api.php route:

<?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();
  });
});

My messages.js vue script:

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

The error message i get currently is 401 and the route is giving back : {"error":"Unauthenticated."}

share|improve this question
    
You specified the auth:api middleware for the group that this route belongs to. It's probably expecting some sort of token with the request. You didn't provide one, so it's unable to authenticate. – Zac Brown Dec 6 '16 at 13:01
    
I thought that the: $.ajaxSetup which should get the token from the meta would work because that is what i read else where @ZacBrown – RPSystems Dec 6 '16 at 13:19
    
Oh, yea. Sorry. Didn't catch that. I think @asemahle's answer below is what you're looking for. – Zac Brown Dec 6 '16 at 14:34
up vote 0 down vote accepted

You have written:

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

This looks for a <meta> element, whose name is csrf-token, and parses out the content. So, for it to work, you need to add that meta tag to the document head. Try this:

<meta id="token" name="csrf-token" content="{{ csrf_token() }}">
share|improve this answer
    
I have just added that in and im still getting 401 unauthroized error @asemahle – RPSystems Dec 6 '16 at 14:43
    
Can you verify that $('meta[name="csrf-token"]').attr('content') is working? Try running it in the console. It should print the value of the csrf token. – asemahle Dec 6 '16 at 14:50
    
Console Log here you go. – RPSystems Dec 6 '16 at 14:57
    
Hm... that seems to be working. If the csrf-token is being set, then I'm not sure what the problem is. You could look at the request in developer tools. In chrome, under the network tab, find the call to /api/test and verify that it either has a X-CSRF-TOKEN in the header, or a XSRF-TOKEN as a request cookie. – asemahle Dec 6 '16 at 16:14
    
all i see is this It looks like there is the token in COOKIE – RPSystems Dec 6 '16 at 16:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.