Gestionar clientes usando Vue.js

Publicar componentes Vue para passport

php artisan vendor:publish --tag=passport-components

Instalar dependencias de Laravel Mix

npm install

Nota: las dependencias se encuentran en la carpeta node_modules. Es importante ignorar esta carpeta en caso de estar sincronizando el proyecto con algún sistema de versionamiento de código.

.gitignore

/node_modules

Compilar Assets (Laravel Mix)

Nota: en caso de hacer modificaciones recompilar

// Run all Mix tasks...
npm run dev

Registrar componentes

Registrar cada componente dentro en resources/assets/js/app.js.

Nota: los nombres de los componentes se utilizan como etiquetas html en las vistas que serán interpretadas por Vue y sustituidas por el contenido real del componente.

Importante -> recompilar luego de cada cambio

• Gestionar Personal Tokens

Vue.component('passport-personal-access-tokens', require('./components/passport/PersonalAccessTokens.vue'));

Registrar ruta que retornará vista que hará uso del componente:

Route::get('/home/my-tokens', 'HomeController@getTokens')->name('personal-tokens');

class HomeController extends Controller
{
    ...

    public function getTokens()
    {
        return view('home.personal-tokens');
    }
}

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <passport-personal-access-tokens></passport-personal-access-tokens>
        </div>
    </div>
@endsection

En layout app.blade.php añadir enlace a la vista

<ul class="nav navbar-nav">
    @if(Auth::check())
        <li><a href="{{ route('personal-tokens') }}">My tokens</a></li>
    @endif
</ul>

Al iniciar sesión con un usuario del sistema que tenga vinculado un cliente obtenemos accediendo a my-tokens

Usando esta interfaz se pueden crear tokens con la opción Create New Token.

Nota: el realizar peticiones con el access token personal funciona porque hemos agregado un cliente de tipo personal en nuestro sistema y adicionalmente este cliente no es usado directamente para obtener el access token sino para facilitar la posibilidad de que desde la interfaz gráfica el usuario lo obtenga.

• Gestionar Clientes

Añadir dos componentes que permitirán visualizar los clientes que son propiedad del usuario que está activo en el momento y gestionar los clientes que ese usuario ha autorizado

Vue.component('passport-clients', require('./components/passport/Clients.vue'));
Vue.component('passport-authorized-clientes', require('./components/passport/AuthorizedClients.vue'));

Route::get('/home/my-clients', 'HomeController@getClients')->name('personal-clients');
Route::get('/home/authorized-clients', 'HomeController@getAuthorizedClients')->name('authorized-clients');

class HomeController extends Controller
{
    ...

    public function getClients()
    {
        return view('home.personal-clients');
    }

    public function getAuthorizedClients()
    {
        return view('home.authorized-clients');
    }
}

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <passport-clients></passport-clients>
        </div>
    </div>
@endsection

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <passport-authorized-clients></passport-authorized-clients>
        </div>
    </div>
@endsection

Al layout app.blade.php añadir enlaces a las vistas

<ul class="nav navbar-nav">
    @if(Auth::check())
        <li><a href="{{ route('personal-tokens') }}">My tokens</a></li>
        <li><a href="{{ route('personal-clients') }}">My clients</a></li>
        <li><a href="{{ route('authorized-clients') }}">Authorized clients</a></li>
    @endif
</ul>