Passport - Consuming Own API with Javascript [Still Unauthorized 401]

I already follow Consuming Your API With JavaScript on Laravel Docs.

This is step that i have done.

Install Passport via composer.

composer require laravel/passport

Register Passport service provider in config\app.php

Laravel\Passport\PassportServiceProvider::class,

Migrate and Install Passport

php artisan migrate

php artisan passport:install

Adding HasApiTokens trait into my App\Administrator.php model.

<?php

namespace App;

use App\HasRole;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Passport\HasApiTokens;

class Administrator extends Authenticatable
{
    use Notifiable, HasRole, HasApiTokens;

Adding Passport::routes() into AuthServiceProvider.php

/**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot(GateContract $gate)
    {
        $this->registerPolicies();
        Passport::routes();

        foreach ($this->getPermissions() as $permission) {
            $gate->define($permission->name, function($administrator) use($permission){
                return $administrator->hasRole($permission->roles);
            });
        }
        
    }

Finally change my config\auth.php.

'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],

-----------------------

'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Administrator::class,
        ],
],

And for Consuming my own Api, i added CreateFreshApiToken into my web middleware group.

'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
        ],

Testing.

Im calling AJAX call using axios, like the code below. Using default url in routes/api.php

axios.get('/api/user')
                .then(function(response){
                    console.log('Component mounted.')        
                })
                .catch(function(error){
                    console.log(error.response.status)
                })

Result

Im still get 401 Unauthorized in my ajax request. Do I miss something please help. :(

General

Request URL:http://ntuc.dev/api/user
Request Method:GET
Status Code:401 Unauthorized
Remote Address:127.0.0.1:80

Response Header

Access-Control-Allow-Origin:*
Cache-Control:no-cache, private
Connection:Keep-Alive
Content-Length:28
Content-Type:application/json
Date:Mon, 13 Feb 2017 14:48:42 GMT
Keep-Alive:timeout=5, max=96
Server:Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/7.0.12
X-Powered-By:PHP/7.0.12
X-RateLimit-Limit:60
X-RateLimit-Remaining:59

Request Headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:laravel_token=eyJpdiI6IllEaXdXNENOckpGSkk1NkJhRGcwYmc9PSIsInZhbHVlIjoiRjlaRG9VNURpczJEUENyb3RnS0JHQ1BLNVMrYmJrQ2F0T3lOdThib01CTzM1eUg5Um5TWUVud281R3lJWG1vSmcza2xQQm1Lc3lhQVdtVDJxNGVTUUU3T3VrWHZVcXdhd2dZaTlpYk9pOUlTaVVHZ0JSUm4wTTBvYnN0OCszczJIUU85eEtFbWRBSWZiVERIa21TZHB1SVJcL3l6b0k5V09JeXBhRXQwcFRJemYycytzNXhjcnRcLzJxZk03Y1JPVVlHWDR1UmNrTHBITWNkQUlhdXo4RkZPZWtVRStBWkNcL09MWEI4WDlSRHJGWVg2YWFTb3hJeXZQSW9sWW1STzFHb1ZrN3hFMTF3cllyclFOR1AySDhqSkE9PSIsIm1hYyI6ImY1YjQ0NTFhMTc1ZTM3OTM4YTgwMTQ4MDZhYThmZDc4MTZkOWE3NzVhZGY2NzI4ODBiMDc1YjMyYzIyMmRjMWIifQ%3D%3D; XSRF-TOKEN=eyJpdiI6Ikk0TzBIQ1JEbVpMRVV6blwvblFHdzNnPT0iLCJ2YWx1ZSI6InpsK0pVRVFGU2x0Q1o0ZWp1dURpcFc0OGtJSkYrdzlsS1BNb2RrRGxLSmJwYVNzbjdzS2JXVG1UVk9tRjFhMTQyeWJ1bXJMUmZ1Z2p3UlNRRlk5b1Z3PT0iLCJtYWMiOiI4NTY5MmFmMTVhY2NmNzZiMjg0ZGNkYWVkY2Q4YWNkOThjZmQxMDMwYjEwNTdiOWVmY2FjZDBmMTU2MThkYzQyIn0%3D; laravel_session=eyJpdiI6IjNwbXJ6XC9wRHRjSlBwYllNcXh0RzNnPT0iLCJ2YWx1ZSI6IlU1T3FJWUlLd3E4RG0wenBXZkZDWmtYOEZxK0xXSlQzQk9PUDRXbXlDNUc2XC9GTkZRNnZwZUN2dnNEZjYzUDNXbTJUNlJYbXVBaURzZ1BvK1wvWGd2MkE9PSIsIm1hYyI6ImU3MWFkZmVkY2Y0NjlkMmQ0NDllNTNkNDkxMWI1YmIxMTQ0MmNhMjEwZGIyMjY2ZWM5NThmYzJlZGY0NzBiNWQifQ%3D%3D
Host:ntuc.dev
Referer:http://ntuc.dev/dashboard
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
X-Requested-With:XMLHttpRequest
X-XSRF-TOKEN:eyJpdiI6Ikk0TzBIQ1JEbVpMRVV6blwvblFHdzNnPT0iLCJ2YWx1ZSI6InpsK0pVRVFGU2x0Q1o0ZWp1dURpcFc0OGtJSkYrdzlsS1BNb2RrRGxLSmJwYVNzbjdzS2JXVG1UVk9tRjFhMTQyeWJ1bXJMUmZ1Z2p3UlNRRlk5b1Z3PT0iLCJtYWMiOiI4NTY5MmFmMTVhY2NmNzZiMjg0ZGNkYWVkY2Q4YWNkOThjZmQxMDMwYjEwNTdiOWVmY2FjZDBmMTU2MThkYzQyIn0=

Please help me. Thanks