Primero instalar vuejs click de la pagina oficial, donde tendra toda la documentacion. Por ahora voy se va instalar cli de vue3 con el comando,
npm install -g @vue/cliCuando termina de instalar, para crear un nuevo proyecto le da el comando
vue create bytefate
Me gusta escoger los packetes que voy a utilizar asi que escogi manual.
Luego que tipo de version se quiere trabajar en mi caso sera vue3, ademas babel, router y vuex.
Luego quieres el modo history que consiste en quitar el (#) de las rutas. Si colocas no igual va a funcionar. Enter.
Luego archivos dedicados.Si, Enter.
Guardar configuracion para nuevos proyectos. No, Enter. Cuando termina te aparecera algo asi.
Ahora hay que ir a la carpeta, que se creo en mi caso bytefate-front y oprimir ejecutar el siguiente comando y el te dira en que puerto esta corriendo.
npm run serve
Despues vas a la direccion que te dio y voula ya esta corriendo.
Ahora con el editor de texto preferido, van a ir a la ruta src/views y vamos a modificar el home.vue.
Voy a quitar todo el contenido del div, a eliminar el import y modificar el export y dejarlo algo asi.
Dentro del form los input tienen una etiqueta llamada v-model, con ella se va a almacenar en un objeto llamado user, los valores que se le pasaron desde el navegador. Lo que hay en la linea 9 solo es para mostrar en pantalla lo que almaceno el objeto. En la linea 18, asi es como se define el objeto que almacenara la informacion. Se puede probar en el navegador y ver como los datos ingresados en los inputs, se imprimen en el navegador.
Ahora algo mas interesante, como toma la aplicacion los datos desde el navegador.
Primero se importa el mapa de acciones desde vuex, en la linea 26, se trae una accion o mejor una funcion y que la va a ejecutar el form, pasandole como parametro el user que tiene los datos del input. El @submit es un evento propio de vue que se dispara al precionar el boton y el prevent es para que la pagina no se refresque.
Cuando se instala vuex, lo que se pretende es centralizar los datos entre las rutas, los componentes en un lugar. Ese lugar es la ruta store/index.js, por defecto tendra modulos, las acciones por lo general lo que hace es llamar a una mutacion, que a su vez modifica el valor del estado y el estado es como un tipo de variable global que vamos a acceder a ellas.
Bien como en la vista llamamos en el mapa de acciones a la funcion login, aqui debemos definirla. Hay que pasarle el commit como parametro y el objeto user, ahora con el console.log podemos mostrar los valores en consola.
Bien ahora que tal si se envia esos datos al backend?
Como se va a hacer una peticion con fetch al backend, lo mejor es convertir la funcion en asincrona, dentro de la sentencia try, se hace una peticion fetch pasandole en el body el objeto usuario y la respuesta la ´muestra por consola. Y el catch me mostrara si hay algun error.
En la linea 26 lo que hace es que llama a la mutacion llamada setToken y se le pasa el token recibido del backend. En la linea 8, setToken es una funcion que recibe un objeto state y un payload que en resumen toma una varible que es la que va a interactuar con el navegador pasandole el token para navegar en las rutas protegidas. Se puede visualizar en el almacenamiento en el modo consola del navegador.
Una comprobacion para que la aplicacion compare si hay un token en el navegador desde el componente padre de la aplicacion (App.vue). Lo que hara es con el siguiente script, es que cuando ingrese a la aplicacion verifique si hay un token de un usuario.
Ahora las rutas protegidas.
Lo que se hara es colocar un meta en la rutas protegidas y un foreach, pasandole 3 parametros (to, from, next) y al final verificar si contiene o no esa ruta la meta que se le coloco a la ruta.
En la linea 14 coloco el meta con un booleano en mi caso es isProtected y en la linea 23 se recorre router, verificando si es protegida o no la ruta. E la consola del navegador se podria visualizar el mensaje de protegido o no.
Ahora una condicion mas si existe el token y la ruta es protegida deberia dejar seguir y en caso contrario deberia redirigir al inicio. En este caso se evalua que si el token existe accediendo al store (import store from '../store'). Despues solo es consultar si el state del token es null se redirecciona al inicio o en el caso contrario podra navegar sin problemas.
Para probar que se este ingresando bien desde una ruta protegida, vamos a alguna ruta que se haya definido. Se importa el mapState como en la linea 9, se accede a los estados a travez de una propiedad computada. Hasta ahi perfecto, ahora para hacer una peticion hacia el backend se debe pasar en los headers un token y en el metodo created se inicializa la funcion que hace el fetch al backend.
Para cerrar sesion lo primero sera ir al index del storage y se creara una funcion Signup que resive un commit como parametro. Ahi se llamara al localStorage y se eliminara el token y tambien se cambiara el valor del estado token a null.
En la pagina principal de vue, anteriormente se habia mapeado las acciones para traer el token, lo que facilita la operacion. Ahora en la linea 14, se debe llamar a la funcion signout que se creo en el store y crear un boton que ejecute dicha funcion como en la linea 5
Para desplegarlo, corre el comando
npm run build
Con eso compilara el proyecto y creara una carpeta nueva llamada dist.
Al ir dentro de esa carpeta, creas el comando git init para crear un nuevo proyecto
Descargar las actualizaciones desde el repositorio para evitar errores
Añades los arhivos al stage con git add nombreArchivo
Creas un commit -m "mensaje sobre el commit"
realizas el git branch -M nombreRama
git push -u origin nombreRama
Con eso se hizo un basico sistema de autenticacion con vue, mongodb express nodejs.