Proyecto cliente SPA para la API de películas con Nuxt.js

Manejando la autenticación

Empezamos esta sección donde implementaremos el sistema de usuarios en el cliente, primeros haremos la parte de la autenticación y cuando la tengamos añadiremos el registro.

Vamos a crear un pequeño formulario de login que aparezca en una ventana modal cuando hacemos clic en el enlace del menú superior.

Este es el código de la modal, podéis copiarlo directamente:

layouts/default.vue

<!-- Modal para el login -->
<b-modal :active.sync="isLoginActive">
  <form action="">
    <div class="modal-card" style="width: auto">
      <header class="modal-card-head">
        <p class="modal-card-title">Identificación</p>
      </header>
      <section class="modal-card-body">
        <b-field label="Email">
          <b-input
            type="email"
            v-model="loginEmail"
            placeholder="Tu email"
            required>
          </b-input>
        </b-field>
        <b-field label="Contraseña">
          <b-input
            type="password" 
            v-model="loginPassword"
            password-reveal
            placeholder="Tu contraseña"
            required>
          </b-input>
        </b-field>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-primary">Acceder</button>
    </footer>
    </div>
  </form>
</b-modal>

Hace uso de tres variables reactivas, dos cadenas con un email y un password (al que podemos dar datos de prueba para ahorrarnos tiempo), y también otra variable para controlar si se muestra o no:

isLoginActive: false,

loginEmail: 'test@test.com',
loginPassword: 'TEST1234A',

Como podéis suponer esta variable la modificaremos al hacer clic en el botón de Acceder:

<a class="button is-light" @click="isLoginActive=true">
  Acceder
</a>

Lo siguiente es capturar el momento que se envía el formulario y en lugar de hacer una petición automática ejecutar un método para gestionar la petición, por ejemplo 'login':

methods: {
  login() {
    return this.$axios.post('/auth/login/', {
      email: this.loginEmail,
      password: this.loginPassword
    })
    .then((res) => {
      if (res.data.key){
      console.log(res.data.key)
      }
    })
    .catch((err) => {
      console.log(err);
    })
  }
 }

Para prevenir el envío automático y llamar al método lo haremos así:

<form action="" v-on:submit.prevent="login">

Si probamos deberíamos recibir correctamente la key, o sea el token.

El siguiente paso será almacenarlo para poder utilizarlo en cualquier lugar de nuestra aplicación, de manera que podamos saber en todo momento si estamos o no autenticados.