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:
0 Comentarios
Dejanos tu comentario para seguir mejorando!