Gestión de Tokens con Vuex: Integración y Almacenamiento en Vue.js
En el fichero main.js tenemos la instancia principal de Vue. Aquí es donde vamos a trabajar para obtener el token y posteriormente guardarlo en el Store con Vuex.
El proceso que hay que seguir es el siguiente:
En el momento en el que la instancia principal de Vue dispare el hook created, hay que llamar a la función que acabamos de crear para obtener el token
Lo segundo es guardar el token en el estado de nuestra aplicación con la ayuda de Vuex
Existen varias formas de hacer esto. Vamos a aprender a llamar a una acción (dispatch) de Vuex desde la instancia principal de Vue, que aunque no es la mejor forma de hacerlo, a efectos prácticos es muy efectivo.
Creamos una función llamada init dentro de methods y el único código que vamos a poner de momento es un console.log. A continuación, llamamos a esta función desde el hook created.
Tu código se vería así:
Ve al navegador, abre la consola y fíjate que se imprima el mensaje.
Vuex + Módulos
En nuestra función init vamos a llamar a otra función que estará en Vuex. Vamos a crear dicha función en el módulo correspondiente.
Para ello, abrimos la carpeta del store de nuestra app /src/store y creamos un nuevo directorio llamado modules. Dentro, creamos un archivo JavaScript: oauth.js. Deberías tener algo como esto:
Como buenos profesionales que somos, vamos a separar nuestro store en módulos (aunque, para este proyecto tan pequeño, no sea necesario), para tenerlo mejor ordenado, y, además, estaremos usando namespaces, para que nos sea más fácil gestionar el estado en caso de que nuestro proyecto crezca, por lo tanto, más escalable.
Abrimos el recién creado módulo oauth.js y escribimos lo siguiente:
// oauth.js// Importamos nuestra función que obtiene el token// @ es un alias para /srcimport*as oauthfrom'@/api/oauth'// Creamos el objeto con "Espacio de Nombres"exportdefault{namespaced:true,state:{},mutations:{},actions:{}}
Estos son los tres bloques que vamos a usar en nuestro módulo:
state (el estado de nuestro módulo)
mutations (las mutaciones que, valga la redundancia, mutarán nuestro estado)
actions (las acciones que llamarán a nuestras mutaciones).
Necesitamos hacer varios cambios en nuestro código. Lo primero es crear una variable que guarde el token, que por defecto tendrá null como valor. Lo creamos de la siguiente forma:
state:{accessToken:null},
Lo segundo es crear la función que cambie (mute) el estado que le estemos pasando. Esta función recibe 2 parámetros como argumentos: el estado de nuestro módulo y el payload (o valor que queremos guardar). Con esto podemos indicarle que cambie el accessToken por el valor que le pasemos en el payload. Cuando lo queramos borrar, le pasamos null.
Ya tienes la variable y la función que cambia el valor de dicha variable. Veamos ahora cómo se obtiene el token y cómo se guarda en el estado de nuestra aplicación. Entra en juego el bloque de actions:
actions:{// Creamos la función getToken, que recibe como parámetro el objeto `context`// Gracias a la asignación de desestructuración de JavaScript, recogemos `commit` como argumentogetToken({ commit }){// Pasos:// 1 - Hacer llamada HTTP para obtener el token// 2 - Si va OK, guardar el token en 'accessToken'. Continuar el flujo normal// 3 - Si hay errror, limpiar el token de 'accessToken', mostrar log del error// Paso 1 oauth.getToken().then(({ data })=>{// Paso 2: Guardamos el valor del token llamando a nuestra mutacióncommit('SET_ACCESS_TOKEN', data.access_token)}).catch((err)=>{// Paso 3: En caso de error limpiamos el tokencommit('SET_ACCESS_TOKEN',null)console.log('Error OAuth: ', err)}).finally(()=>{// Por ahora no hacemos nada más aquíconsole.log('Done!')})}}
Ya tenemos nuestra funcionalidad para obtener el token creada. Ahora solo queda llamarla desde la instancia principal de Vue y probar que todo funciona.
Las acciones en Vuex se llaman a través de dispatch. Esto es lo que vamos a hacer desde nuestro método init en el archivo main.js.
Lo que vamos a hacer ahora es borrar todo, excepto el bloque de modules, a la vez que importamos el módulo de oauth.js y lo damos de alta en el Store.
// store/index.jsimportVuefrom'vue'importVuexfrom'vuex'// Importar oauthimportoauthfrom'./modules/oauth'Vue.use(Vuex)exportdefaultnewVuex.Store({// Aquuí registramos todos los módulosmodules:{ oauth
}})
Si cargas la aplicación y abres la consola del navegador, deberías ver el mensaje que pusiste en el finally(), en este caso verías el log del Hola y del Done!.
Si revisas la pestaña de "Network" o "Red" en las herramientas para desarrolladores de tu navegador, deberías ver algo como esto:
Vemos que la petición se está haciendo y nos devuelve los datos. Para comprobar si están guardándose o no, tienes que ir a las DevTools de Vue y revisar la pestaña de Vuex.
En la parte izquierda se ve un registro (log) de las mutaciones que han ocurrido hasta el momento, y a la izquierda se ve el estado actual del Store o estado de nuestra app.
¡Perfecto! Hemos obtenido el token y lo hemos guardado. Está disponible desde cualquier parte de la aplicación. Ahora podrás usarlo cuando lo necesites.
