title: Vuejs 2 with Laravel 5.4 backend, post (Unauthorized) error
body: <p>I'm learning Vuejs 2, and building a customer directory app for fun and testing, Laravel 5.4 as backend (api) with Cors and Passport packages. and Vuejs as a frontend with vue-router and axios I'm able to login and store the token in a cookie I get the all the customers without any errors, but when I try to create a new customer I get the following errors in console <strong>POST <a href="http://localhost:8000/api/customer" rel="nofollow noreferrer">http://localhost:8000/api/customer</a> 401 (Unauthorized)</strong> in network <strong>{"error":"Unauthenticated."}</strong>. if I comment the auth:api middleware I can post without any errors.</p>
  
  <p><strong>routes/api.php</strong></p>
  
  <pre><code>      Route::get('/', 'CustomerCtrl@index');
     Route::get('customer/{id}', 'CustomerCtrl@show');
  Route::post('customer', 'CustomerCtrl@store');
  Route::delete('customer/{id}', 'CustomerCtrl@destroy');
  Route::put('customer/{id}', 'CustomerCtrl@update');
  </code></pre>
  
  <p><strong>CustomerCtrl.php</strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use App\Customer;
  use Illuminate\Http\Request;
  
  class CustomerCtrl extends Controller
  {
      public function __construct()
      {
          $this-&gt;middleware('auth:api');
      }
  
      public function index()
      {
          return response()-&gt;json(Customer::all(), 200);
      }
  
      public function show($id)
      {
          return response()-&gt;json(Customer::findOrFail($id), 200);
      }
  
      public function store(Request $request)
      {
          $this-&gt;validate($request, [
            'first_name' =&gt; 'required',
            'last_name' =&gt; 'required',
            'email' =&gt; 'required|email',
            'phone' =&gt; 'required',
            'address' =&gt; 'required',
            'country' =&gt; 'required',
          ]);
          Customer::create($request-&gt;all());
          return response()-&gt;json('Customer Created', 200);
      }
  
      public function update(Request $request, $id)
      {
          $this-&gt;validate($request, [
            'first_name' =&gt; 'required',
            'last_name' =&gt; 'required',
            'email' =&gt; 'required|email',
            'phone' =&gt; 'required',
            'address' =&gt; 'required',
            'country' =&gt; 'required',
          ]);
          $customer = Customer::findOrFail($id);
          $customer-&gt;update($request-&gt;all());
          return response()-&gt;json('Customer Updated', 200);
      }
  
      public function destroy(Request $request, $id)
      {
          $customer = Customer::findOrFail($id);
          $customer-&gt;forceDelete();
          return response()-&gt;json('Customer Deleted', 200);
      }
  }
  </code></pre>
  
  <p><strong>new customer component (vuejs)</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="add-customer"&gt;
    &lt;h1 class="page-header"&gt;Add Customer&lt;/h1&gt;
    &lt;div v-if="isErrors" class="alert alert-danger"&gt;
      &lt;ul&gt;
        &lt;li v-for="error in errors"&gt;
          {{error[0]}}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;form @submit.prevent&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="firstName"&gt;First Name&lt;/label&gt;
        &lt;input type="text" id="firstName" v-model="first_name" class="form-control"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="lastName"&gt;Last Name&lt;/label&gt;
        &lt;input type="text" id="lastName" v-model="last_name" class="form-control"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="email"&gt;Email&lt;/label&gt;
        &lt;input type="text" id="email" v-model="email" class="form-control"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="Phone"&gt;Phone&lt;/label&gt;
        &lt;input type="text" id="Phone" v-model="phone" class="form-control"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="country"&gt;Country&lt;/label&gt;
        &lt;input type="text" id="country" v-model="country" class="form-control"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="address"&gt;Adress&lt;/label&gt;
        &lt;textarea type="text" id="address" v-model="address" class="form-control" rows="3"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;button @click.prevent="addCustomer" class="btn btn-primary"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'add-customer',
    data() {
      return {
        first_name: '',
        last_name: '',
        address: '',
        phone: '',
        country: '',
        email: '',
        errors: {},
        isErrors: false
      }
    },
    head: {
      title: {
        inner: 'Add Customer'
      },
    },
    methods: {
      addCustomer() {
        this.$http.post('http://localhost:8000/api/customer', {
          headers: {
             'Authorization':'Bearer ' + this.$cookie.get('token')
          },
          first_name: this.first_name,
          last_name: this.last_name,
          address: this.address,
          phone: this.phone,
          country: this.country,
          email: this.email
        }).then(res =&gt; {
          console.log(res);
          this.$router.push({
            name: 'Customers'
          })
        }).catch(res =&gt; {
          this.isErrors = true;
          this.errors = res.response.data;
          console.log(res);
  
        });
      }
    }
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Login.vue component</strong></p>
  
  <pre><code>  methods: {
      login() {
        const data = {
          client_id: 4,
          client_secret: '55bC4Ud1ariLqnHSk1fxKiKHF8FDI8NTWHR5d13k',
          grant_type: 'password',
          username: this.email,
          password: this.password
  
        }
        this.$http.post('http://localhost:8000/oauth/token/', data).then(res =&gt; {
          console.log(res);
          this.$cookie.set('api_token', res.data.access_token, 1);
          this.$router.push({
            name: 'Customers'
          })
        }).catch(res =&gt; {
          this.isErrors = true;
          this.errors = res.response.data;
          console.log(res);
        });
      }
    }
  </code></pre>