JWT Auth con Vue, Vuex y Vue Router - Axios & Guards

 Vuex es la biblioteca de administración de estado para aplicaciones Vue. Proporciona un almacén central para almacenar globalmente el estado completo de la aplicación. También asegura que todos los componentes accedan a los datos de cierta manera.

En este tutorial, verá cómo puede usar Vue.js con Vuex y Axios para crear una aplicación que permita a los usuarios registrarse e iniciar sesión a través de la autenticación JWT.

Dado que Vue.js es solo una biblioteca de front-end, necesitaremos un back-end que maneje la autenticación JWT y devuelva tokens de acceso JWT válidos al cliente. Aquí viene el papel de Vuex para almacenar los tokens de acceso y adjuntarlos con cualquier solicitud saliente para acceder a recursos protegidos usando Axios.

Prerrequisitos

Para poder seguir este tutorial paso a paso, debe tener:

• Un conocimiento práctico de Vue.js,
• Una versión reciente de Node.js y NPM instalada en su máquina de desarrollo.

Para el servidor back-end que implementa la autenticación JWT, debe seguir el tutorial Node Express JWT Authentication - jsonwebtoken y bcryptjs para crearlo.

También debe leer el Tutorial de Vuex para aprender los conceptos básicos de Vuex.

En este tutorial nos centraremos en el front-end con Vue, Vuex y Axios.

Instalación de Vue CLI 3 y creación de un proyecto

En este tutorial usaremos Vue CLI 3 para crear y trabajar con nuestro proyecto. Vue CLI proporciona varios ajustes preestablecidos que puede usar para generar su proyecto, pero también le permite elegir las bibliotecas individuales que desea incluir en su proyecto.

Primero, instale Vue CLI v3 usando el siguiente comando:

$ npm install @vue/cli -g 

Nota : Es posible que necesite agregar sudo antes de ejecutar el comando en sistemas Linux / Ubuntu o usar un símbolo del sistema de administrador en Windows para instalar Vue CLI globalmente en su sistema. En el momento de escribir este artículo, Vue CLI v3.1.3 está instalado.

Dirígete a tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto de Vue:

$ vue create vue-vuex-auth

Cuando se le solicite que seleccione un ajuste preestablecido, elija Seleccionar funciones manualmente y presione Entrar . A continuación, se le pedirá que seleccione las funciones que necesita en su proyecto, asegúrese de marcar Router y Vuex .

También se le harán muchas otras preguntas, simplemente puede elegir las opciones predeterminadas y continuar con los siguientes pasos.

La CLI creará un proyecto Vue en una vue-vuex-authcarpeta, inicializará un repositorio GIT y luego instalará los paquetes npm y los complementos CLI.

Cuando el proyecto se haya creado correctamente, navegue dentro de la vue-vuex-authcarpeta e inicie su servidor de desarrollo:

 $ cd vue-vuex-auth
 $ npm run serve

Podrás acceder a tu aplicación Vue desde la http://localhost:8080/dirección. Verás la siguiente página:

Instalación y configuración de Axios

Usaremos Axios para enviar solicitudes HTTP al servidor Express, por lo que debemos instalarlo en el proyecto a través de npm:

$ npm install axios --save

Nota : En el momento de escribir este artículo, axios v0.18.0 está instalado.

Dado que necesitaremos usar Axios para enviar solicitudes desde cualquier componente de Vue, necesitaremos importar en el src/main.jsarchivo.

Abra el src/main.jsarchivo y actualícelo de la siguiente manera:

import  Vue  from  'vue'
import  App  from  './App.vue'
import  router  from  './router'
import  store  from  './store'
import  Axios  from  'axios'

Vue.config.productionTip  =  false
Vue.prototype.$http  =  Axios;
const  accessToken  =  localStorage.getItem('access_token')

if (accessToken) {
    Vue.prototype.$http.defaults.headers.common['Authorization'] =  accessToken
}

new  Vue({
router,
store,
render:  h  =>  h(App)
}).$mount('#app')

Primero importamos Axios. A continuación, agregamos Axios a la instancia de Vue como $http. Esto lo hará disponible en cualquier lugar de nuestra aplicación Vue.

Si se encuentra un token de acceso en el almacenamiento local, lo adjuntamos a cada solicitud Axios saliente a través del Authorizationencabezado.

Creación del componente de registro

Cree un src/views/Signup.vuearchivo y agregue la siguiente plantilla:

<template>
  <div>
    <h2>Signup Page</h2>
    <form @submit="register">
      <div>
          <input  type="text" placeholder="Name" v-model="name">
      </div>
      <div>
          <input placeholder="Your email" type="email" v-model="email">
      </div>
      <div>
          <input placeholder="Password" type="password" v-model="password">
      </div>
      <div>
          <input placeholder="Confirm password" type="password" v-model="password2">
      </div>
      <div>
          <button type="submit">Register</button>
      </div>
    </form>
  </div>
</template>

Creación de datos y métodos

En el mismo src/views/Signup.vuearchivo, agregue el siguiente código debajo de la plantilla:

<script>
  export default {
    data(){
      return {
        name : "",
        email : "",
        password : "",
        password2 : ""
      }
    },
  }
</script>

A continuación, defina el signup()método para registrar usuarios:

<script>
  export default {
    // [...]
    methods: {
      signup: function () {
        let info = {
          name: this.name,
          email: this.email,
          password: this.password
        }

        this.$store.dispatch('signup', info).then(() => this.$router.push('/login'))

      }
    }
  }
</script>

Creación del componente de inicio de sesión

Cree un src/views/Login.vuearchivo y agregue la siguiente plantilla:

<template>
  <div>
    <h2>Login Page</h2>
    <form @submit="login">
      <div>
          <input placeholder="Your email" type="email" v-model="email">
      </div>
      <div>
          <input placeholder="Password" type="password" v-model="password">
      </div>
      <div>
          <button type="submit">Login</button>
      </div>
    </form>
  </div>
</template>

Agregar datos y métodos

En el src/views/Login.vuearchivo, agregue el siguiente código:

<script>
  export default {
    data(){
      return {
        email : "",
        password : ""
      }
    },
    methods: {
      login: function () {
        const email = this.email 
        const password = this.password
        this.$store.dispatch('login', { email, password }).then(() => this.$router.push('/'))
      }
    }
  }
</script>

A continuación, agregue el login()método:

    methods: {
      login: function () {
        const email = this.email 
        const password = this.password
        this.$store.dispatch('login', { email, password }).then(() => this.$router.push('/'))
      }
    }

Agregar las rutas

Abra el src/router.jsarchivo y agregue dos rutas a los componentes Signupy Login.

import  Vue  from  'vue'
import  Router  from  'vue-router'
import  Home  from  './views/Home.vue'
import  Signup  from  './views/Signup.vue'
import  Login  from  './views/Login.vue'
Vue.use(Router)

export  default  new  Router({
mode:  'history',
base:  process.env.BASE_URL,
routes: [
{
path:  '/',
name:  'home',
component:  Home
},
{
path:  '/about',
name:  'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>  import(/* webpackChunkName: "about" */  './views/About.vue')
},
{
path:  '/signup',
name:  'signup',
component:  Signup
},
{
path:  '/login',
name:  'login',
component:  Login
}
]
})

Agregar navegación

Abra el src/App.vuecomponente y agregue los enlaces a los componentes Signupy Login.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> | 
      <router-link to="/signup">Signup</router-link> |
      <router-link to="/login">Login</router-link>      
    </div>
    <router-view/>
  </div>
</template>

También abra el src/views/Home.vuecomponente y actualice su plantilla:

<template>
  <div class="home">
  <h1>Home</h1>
  </div>
</template>

Esta es una captura de pantalla del componente principal de la aplicación en este punto:

Agregar estado de Vuex

Abra el src/store.jsarchivo y agregue el estado para almacenar información sobre el usuario actual y el token de acceso:

import  Vue  from  'vue'
import  Vuex  from  'vuex'
Vue.use(Vuex)

export  default  new  Vuex.Store({
state: {
accessToken:  localStorage.getItem('access_token') ||  '',
currentUser : {}
},
mutations: {
},
actions: {
}
})

También necesita importar axios:

import axios from 'axios'

Agregar la login()acción

En el objeto de tienda dentro del objeto de acciones, agregue un login()método:

Agregar la signup()acción

Agregar la logout()acción