Laravel - Using Gates on API requests for authorization

I have a laravel app setup perfectly with roles and permissions using gates. For example, in the web routes file I have this which works great:

WEB.PHP

Route::resource('groups', 'SuperAdmin\GroupsController')->middleware('can:SEE-admin-dashboard');

However, when I try to apply the same middleware to API requests (inside Vue Components), it will not work. I keep getting unauthorised messages. Here are two things I've tried..

API.PHP

Attempt 1-

Route::post('group_times', 'TimesController@custom_groups_times')->middleware('can:SEE-admin-dashboard');

Attempt 2-

Route::middleware('auth:api')->post('group_times', 'TimesController@custom_groups_times', function(Request $request) {
    return $request->user();
});

I'm getting a 401 unauthorised message:

I have setup each user with an API token as mentioned in the Laravel docs. Like so, but no such luck.

Am I missing something here?

---

EDIT:

Here is the code from AuthServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        // 'App\Model' => 'App\Policies\ModelPolicy',
    ];

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

        Passport::routes();


        // Implicitly grant "Super Admin" role all permissions
        // This works in the app by using gate-related functions like auth()->user->can() and @can()
        Gate::before(function ($user, $ability){
            return $user->hasRole('Super Admin') ? true : null;
        });

        //Superadmin check
        Gate::define('isSuperAdmin', function($user){
            return $user->hasRole('Super Admin');
        });

        //PLT Student check
        Gate::define('isPLTStudent', function($user){
            return $user->hasRole('PLT Student');
        });

        //Student check
        Gate::define('isStudent', function($user){
            return $user->hasRole('Student');
        });

        //SEE Admin Panel
        Gate::define('SEE-admin-panel', function($user){
            return $user->hasAnyRoles(['PLT Student']);
        });

        //SEE Admin Dashboard
        Gate::define('SEE-admin-dashboard', function($user){
            return $user->hasAnyRoles(['PLT Student']);
        });

        //USERS PERMISSIONS

            //Overall
            Gate::define('USERS-manage-users', function($user){
                return $user->hasAnyRoles(['PLT Student']);
            });

            //Specific
            Gate::define('USERS-create-users', function($user){
                return $user->hasRole('PLT Student');
            });
            Gate::define('USERS-view-users', function($user){
                return $user->hasRole('PLT Student');
            });
            Gate::define('USERS-edit-users', function($user){
                return $user->hasRole('PLT Student');
            });
            Gate::define('USERS-delete-users', function($user){
                return $user->hasRole('PLT Student');
            });

        //RUNS PERMISSIONS

        //Overall
        Gate::define('RUNS-manage-runs', function($user){
            return $user->hasAnyRoles(['PLT Student']);
        });

        //Specific
        Gate::define('RUNS-create-runs', function($user){
            return $user->hasRole('PLT Student');
        });
        Gate::define('RUNS-view-runs', function($user){
            return $user->hasAnyRoles(['PLT Student', 'Student']);
        });
        Gate::define('RUNS-edit-runs', function($user){
            return $user->hasRole('PLT Student');
        });
        Gate::define('RUNS-delete-runs', function($user){
            return $user->hasRole('PLT Student');
        });
        Gate::define('RUNS-delete-runs', function($user){
            return $user->hasRole('PLT Student');
        });

    //RUNTYPES PERMISSIONS

        //Overall
        Gate::define('RUNTYPES-manage', function($user){
            //return $user->hasAnyRoles(['PLT Student']);
        });

        //Overall
        Gate::define('RUNTYPES-view', function($user){
            return $user->hasAnyRoles(['PLT Student', 'Student']);
        });

    //RUNTYPES PERMISSIONS

        //Overall
        Gate::define('GROUP-manage', function($user){
            //return $user->hasAnyRoles(['PLT Student']);
        });
    }

}

Vue axios:

//Get time data to populate table
            getTimes(){
axios.post('/api/group_times', {
                group_id: this.group_id,
                amount: 5,
                season_id: this.season_id
            })
                .then(response => {
                        this.times = response.data;
                    }
                );
        },

via Chebli Mohamed