Laravel y JWT — preparando nuestra api para Vue

En la publicación anterior

Vuejs y JWT

Quedamos con que íbamos a crear una API que nos sirva tokens para poder manejarlos desde vuejs; es por eso que de una manera breve vamos a crear nuestra api desde cero con laravel. Ten en cuenta que no entraremos a profundidad en el código, ni lo explicaremos de manera detallada; debido a que nos centraremos más que todo en el frontend.

¿Qué es una API? ¿qué nos devuelve? ¿la api genera los tokens?

Empecemos desde 0; respondiendo la primer pregunta.

API viene de sus siglas en inglés application programming interface, y RedHat lo define de la siguiente manera:

Una API es un conjunto de definiciones y protocolos que se utiliza para desarrollar e integrar el software de las aplicaciones. API significa interfaz de programación de aplicaciones.

Las API permiten que sus productos y servicios se comuniquen con otros, sin necesidad de saber cómo están implementados. Esto simplifica el desarrollo de las aplicaciones y permite ahorrar tiempo y dinero. Las API le otorgan flexibilidad; simplifican el diseño, la administración y el uso de las aplicaciones, y proporcionan oportunidades de innovación, lo cual es ideal al momento de diseñar herramientas y productos nuevos (o de gestionar los actuales).

¿Qué nos devuelve? una API nos devuelve datos en formato JSON, XML, texto plano entre otros formatos, pero el más común es JSON, y es aquí donde empieza la magia de las API ya que son más flexibles y trabajan de manera aislada del resto del código frontend. (En nuestro caso Vuejs). No solo eso, aparte de servirnos los datos, es la capa encargada en hacer conexiones a la base de datos.

Ya hemos visto una breve introducción a qué es una API, y continuaremos a crear nuestra propia API que se encargará de devolvernos los datos que requerimos para nuestro ejemplo; más que todo enfocándonos en el uso de los tokens.

Primero instalaremos un nuevo proyecto de Laravel

Ejecutamos en consola composer global require laravel/installer seguido de: laravel new medium-laravel-api abrimos la carpeta siempre desde nuestra consola: cd/medium-laravel-api y ejecutamos composer install

Luego tendremos que preparar nuestro proyecto con JWT; puedes seguir esta guía que esta bastante detallada de cómo hacerlo o si no, según la documentación oficial.

Voy a supone que ya tienes listo tu backend, llamese Java, c#, python o cualquier otro lenguaje que nos devuelva un tokens JWT funciona de la misma manera, y no es necesario pasos extras desde vue, así que si ese es el caso, te invito a que te saltes esta parte, y vayas directamente al post de Vuejs. (pronto estará publicado)

y sino es así, no te preocupes que estamos aquí para crear nuestra propia API

Tendremos 3 tablas, una de usuarios, básica por supuesto, la tabla de blogs, y la tabla de comentarios para blogs de la siguiente manera.

Diagrama de la DB para nuestro ejemplo

¿Sencilla no?

Creamos 3 nuevas migraciones para cada tabla, quedando de la siguiente manera

Para usuarios

public function up(){
 Schema::create('users', function (Blueprint $table) {
   $table->bigIncrements('id');
   $table->string('name');
   $table->string('email')->unique();
   $table->string('url');
   $table->string('password')->nullable();
   $table->timestamps();
 });
}

Para blogs

public function up(){
    Schema::create(‘blogs’, function (Blueprint $table) {
        $table->bigIncrements(‘id’);
        $table->string(‘titulo’); 
        $table->text(‘cuerpo’);
        $table->string(‘url’);
        $table->unsignedBigInteger(‘user_id’);
        $table->timestamps();
        $table->foreign(‘user_id’)->references(‘id’)->on(‘users’);
    });
}

Para comentarios blogs

public function up(){
    Schema::create(‘comentario_blogs’, function (Blueprint $table) {
       $table->bigIncrements(‘id’);
       $table->text(‘comentario’);
       $table->unsignedBigInteger(‘blog_id’);
       $table->unsignedBigInteger(‘user_id’);
       $table->timestamps();
       $table->foreign(‘user_id’)->references(‘id’)->on(‘users’);
       $table->foreign(‘blog_id’)->references(‘id’)->on(‘blogs’);
   });
}

Cada migrations con respectivo modelo

Modelo para Blog

class Blog extends Model{
   protected $guarded = [‘id’];
// Relaciones
   public function comentarios(){
      return $this->hasMany(ComentarioBlog::class)->latest();
   }
   public function usuario(){
      return $this->hasOne(User::class, ‘id’, ‘user_id’);
   }
// Mutadores
    public function setTituloAttribute($attribute){
       $this->attributes[‘titulo’] = $attribute;
       $url = str_slug($attribute);
//Verificando que la url sea unica
        if ($this->where(‘url’, $url)->exists()) {
        //Obtiene el ultimo post que coincida con la url y le                       sumauno, para tner la nueva URL
            $tempo = $this->latest()->
                where(‘url’, ‘LIKE’,   “{$url}%”)->first();
            $url = “{$url}-”.++$tempo->id;
     }
     $this->attributes[‘url’] = $url;
  }
}

Modelo para Usuarios

class User extends Authenticatable implements JWTSubject {
   use Notifiable, HasRoles;
    // Guard name como API para poder acceder desde JWT
   protected $guard_name = ‘api’;
   public function getJWTIdentifier(){
     return $this->getKey();
   }
    public function getJWTCustomClaims() {
      return [];
    }
    protected $fillable = [
      ‘name’, ‘email’, ‘password’,
    ];
    protected $hidden = [
       ‘password’, ‘remember_token’,
    ];
    protected $casts = [
       ‘email_verified_at’ => ‘datetime’,
    ];
// Mutadores
    public function setPasswordAttribute($attribute) {
       $this->attributes[‘password’] = bcrypt($attribute);
       $url = str_replace(‘ ‘, ‘-’, $this->attributes[‘name’]); 
       if (static::where(‘url’, $url)->exists()) {
//Obtiene el ultimo post que coincida con la url y le sumauno, para tner la nueva URL
         $tempo = static::latest()->where(‘url’, $url)->first();
         $url = “{$url}-”.++$tempo->id;
    }
    $this->attributes[‘url’] = strtolower($url);
}
// Relaciones para blogs
  public function blogs(){
     return $this->hasMany(Blog::Class);
  }
}

Modelo ComentarioBlog

class ComentarioBlog extends Model {
   protected $guarded = [‘id’];
// Relaciones para usuarios
   public function usuario(){
      return $this->hasOne(User::class, ‘id’, ‘user_id’);
   }
}

No entraremos en detalle sobre qué hace cada cosa, ni tampoco cuál es la función de un modelo, de una migración o seeders, recuerden que solo estamos creando una API sencilla para poderla consumir desde Vue

En la siguiente imagen se describe el código usado para generar datos ramdon en nuestra base de datos.

Seeders usados para agregar datos a nuestra bd

Básicamente hemos construido nuestra propia API.

¿Y los controladores? seguramente te has preguntado.. pues, debido a que son un poco extensos te dejo la url a cada controlador en github. Échales un vistazo para comprender de una mejor manera lo que hemos hecho.

Controlador para blogs

DesKevinMendez/vue-jwt-laravel

Controlador para autenticación

DesKevinMendez/vue-jwt-laravel

Te recomiendo que los revises para evitar confusiones más adelante.

¿Qué es lo que hace nuestra API?

Son dos cosas para lo cual la usaremos

• Nos sirve y válida los Tokens generados para cada usuario que haga login o se registre en nuestra plataforma.
• Nos sirve para guardar datos en una base datos; en nuestro caso, guardar los blogs y los comentarios para cada blog.

En esta ocasión no entraremos tan afondo sobre Laravel; ya que a futuro empezaré a escribir al respecto ;)

En el siguiente capitulo, consumiremos nuestra API desde vuejs

PD: si gustas, puedes adelantarte creando tu propio proyecto con vue-cli; y sí, tengo una publicación que explica cómo hacerlo.

¿Cómo configurar vue con TypeScript y vuex? PART I

Nos vemos pronto. Sugerencia, o duda, dejadlo en los comentario.

Parte frontend vuejs

Agrando JWT a Vuejs