Importa también [`axios`](https://github.com/axios/axios) para poder enviar una solicitud HTTP al servidor:

 import axios from 'axios'

Antes de continuar, necesitaremos agregar algunas reglas a la base de datos para poder validar el correo electrónico como deberíamos, tal como se ve a continuación:

 "read" = "true"

Lo que significa que la base de datos se puede leer sin ningún obstáculo desde el lado del cliente.

 "write" = "auth" !== null

No puede escribir en la base de datos a menos que sea un usuario autenticado.

 "Users" = { "onIndex" : ["email"] }

Esto nos permite consultar el documento `users` con un índice de `email`. Es decir, literalmente puede filtrar la base de datos para un correo electrónico único. Luego agregue una propiedad calculada personalizada con el nombre `validaciones` al igual que tenemos métodos, computados, etc. En `validaciones` tendremos métodos para validar los datos necesarios a partir de `correo electrónico` donde se requiere y obviamente debe ser un correo electrónico . Además, queremos poder decirle a un usuario cuándo otra persona ya tomó un correo electrónico, revisando la base de datos después de que el usuario lo haya escrito usando algo llamado validadores asíncronos, todo dentro de un validador personalizado y todo es compatible con [vuelidate. ](https://vuelidate.js.org/#sub-asynchronous-validation) Luego, en único, consulte la base de datos usando axios y use las teclas Object.keys predeterminadas para devolver la respuesta solo si su longitud es 0. Para la edad, agregará el valor requerido, numérico y mínimo de 18 que está asignado a `minVal ` como sus propiedades.

 age: { required, numeric, minVal: minValue(18) }

Las propiedades de la contraseña son obligatorias, con una longitud mínima de 6 asignada a `minLen`.

 password: { required, minLen: minLength(6) }

Las propiedades de `confirmPassword` son básicamente las mismas que la contraseña.

 confirmPassword: { sameAs: sameAs(vm => { return vm.password }) }

Para decirle al usuario que se tomó el correo electrónico, use `v-if` para verificar si `unique` es verdadero o falso. Si es verdadero, significa que la longitud del objeto devuelto es 0, y el correo electrónico aún se puede usar y viceversa. De la misma manera, puede verificar si la entrada del usuario es un correo electrónico real usando `v-if`. Y para todos los divs circundantes en la entrada individual, agregaremos una clase no válida que se activa una vez que hay un error en esa entrada. Para vincular los eventos de validación a cada una de las entradas en el HTML, usamos [`$touch()`](https://vuelidate.js.org/#sub-without-v-model) como se ve con el `email ` a continuación. `Age`, `password` y `confirmPassword` se vincularán a su entrada HTML de manera similar al `correo electrónico`. Y desactivaremos el botón 'Enviar' si hay un error en alguna de las entradas.

 <button type="submit" :disabled="$v.$invalid">create</button>

Aquí hay un [ejemplo de CodePen] completo (https://codepen.io/atanda1/pen/Yzyqrjv) para esta sección de revisión.

## Autenticación Esta aplicación es un SPA y no se recarga como los sitios tradicionales, por lo que usaremos Vuex, como nuestra única "fuente de verdad" para permitir que cada componente de nuestra aplicación conozca el estado general de autenticación. Vamos a nuestro archivo de tienda y creamos ambos métodos de inicio de sesión/registro dentro de las acciones. La respuesta (`token` y `userId`) recibida cuando enviamos los datos de los usuarios, se almacenará dentro de nuestro estado. Esto es importante porque el token se utilizará para saber si todavía estamos conectados o no en algún momento dentro de nuestra aplicación. El `token`, el `userId` y el usuario se crean en el estado con un valor inicial nulo. Llegaremos al usuario mucho más tarde, pero por ahora, nos centraremos en los dos primeros.

 state: { idToken: null, userId: null, user: null }

Luego se crean mutaciones para cambiar el estado cuando sea necesario.

authUser	Guarda el token y el userId de usuario
storeUser	Almacena la información del usuario
clearAuthData	Borra los datos de vuelta al estado inicial

 mutations: { authUser (state, userData) { state.idToken = userData.token state.userId = userData.userId }, storeUser (state, user) { state.user = user }, clearAuthData (state) { state.idToken = null state.userId = null state.user = null } }

Para registrarse/iniciar sesión, tendremos que crear acciones individuales para ambos, donde enviamos nuestras solicitudes de autenticación al servidor. Después de lo cual, nuestra respuesta (token e Id. de usuario) de registro/inicio de sesión se compromete a authUser y se guarda en el almacenamiento local. Pero aquí está la parte difícil, lo que haremos con la acción de registro en particular es enviar solo el correo electrónico y la contraseña para registrarse en la base de datos de autenticación. En el sentido real, no tenemos acceso para usar los datos en esta base de datos de autenticación, y no enviamos ninguno de nuestros datos de registro además del correo electrónico/contraseña. Entonces, lo que haremos es crear otra acción para enviar los datos completos de registro a otra base de datos. En este documento de base de datos separado, tendremos acceso completo a toda la información que elijamos guardar allí. Llamaremos a esta nueva acción `storeUser` Luego vamos a nuestra acción de registro y enviamos todo el objeto que contiene nuestros datos de registro a una base de datos a la que ahora tenemos acceso a través de `storeUser`. **Nota:** Es posible que no desee enviar la contraseña de su usuario con `storeUser` a la base de datos por razones de seguridad. `storeUser` agrega una consulta utilizando nuestro token recién obtenido y la API de la base de datos mientras se publica en la base de datos. Esto se debe a que no podemos escribir en nuestra base de datos, excepto que estemos autenticados con nuestra prueba (el token). Esa es la regla que le dimos a Firebase al principio, ¿recuerdas?

 “write” = “auth” !== null

El código completo para las acciones de registro/inicio de sesión está justo [aquí] (https://codepen.io/atanda1/pen/mdePKqj). Luego envíe tanto el registro como el inicio de sesión desde sus componentes dentro del método `onSubmit` a las acciones respectivas en la tienda.

 methods : { onSubmit () { const signupData = { email : this.email, name : this.name, age : this.age, password : this.password, confirmPassword : this.co nfirmPassword } this.$store.dispatch('signup', signupData) } } }

**Nota:** `signupData` contiene los datos del formulario. ## AuthGuard Es necesario que AuthGuard evite que los usuarios que no hayan iniciado sesión obtengan acceso al tablero donde enviarán la encuesta. Vaya al archivo de ruta e importe nuestra tienda.

 import store from './store'

Dentro de la ruta, vaya a la ruta del tablero y agregue lo siguiente:

 const routes = [ { path: '/', component: WelcomePage }, { path: '/signup', component: SignupPage }, { path: '/signin', component: SigninPage }, { path: '/dashboard', component: DashboardPage, beforeEnter (to, from, next) { if (store.state.idToken) { next() } else { next('/signin') } } } ]

Todo esto hace es comprobar si hay un token en el estado, si es así, damos acceso al tablero y viceversa. ## LogOut Para crear nuestra opción de cierre de sesión, haremos uso de `clearAuth` que creamos anteriormente en `mutations`, que simplemente establece tanto el `token` como el `userId` en `null`. Ahora creamos una nueva `acción` `logout`, que se compromete a `clearAuth`, elimina el almacenamiento local y agrega `router.replace('/')` para redirigir al usuario por completo.

 actions: { logout ({commit}) { commit('clearAuth') localStorage.removeItem('token') localStorage.removeItem('userId') router.replace('/') } }

En el componente de encabezado, tenemos un método `onLogout` que envía nuestra acción de cierre de sesión en la tienda.

 methods: { onLogout() { this.$store.dispatch('logout') } }

Luego agregamos un `@click` al botón que activa el método `onLogout` como podemos ver [aquí](https://codepen.io/atanda1/pen/jObqKNd).

 <ul @click="onLogout">Log Out</ul>

## UI_State Ahora que hemos otorgado acceso condicional al tablero, el siguiente paso es eliminarlo de la barra de navegación, para que solo los usuarios autenticados puedan verlo. Para hacer eso, añadiríamos un nuevo método bajo los `getters` llamado `ifAuthenticated` que verifica si el token dentro de nuestro estado es nulo. Cuando hay un token, muestra que el usuario está autenticado y queremos que vea la opción del panel de la encuesta en la barra de navegación.

 getters: { isAuthenticated (state) { return state.idToken !== null } }

Después de lo cual, regresa al componente de encabezado y crea un método `auth` bajo computado, que envía a nuestro `isAuthenticated` dentro de los `getters` que acabamos de crear en la tienda. Lo que esto hace es que `isAuthenticated` devolvería false si no hay token, lo que significa que `auth` también sería nulo y viceversa.

 computed: { auth () { return this.$store.getters.ifAuthenticated } }

Después de esto, agregamos un `v-if` a nuestro HTML para verificar si `auth` es nulo o no, determinando si esa opción se mostraría en la barra de navegación.

 <li v-if='auth'> <router-link to="/dashboard">Dashboard</router-link> </li> <li v-if='!auth'> <router-link to="/signup">Register</router-link> </li> <li v-if='!auth'> <router-link to="/signin">Log In</router-link> </li>

- Encontrarás el código completo de la sección Estado de UI [aquí](https://codepen.io/atanda1/pen/QWjNxyo).

Ingreso automático

Cuando recargamos nuestra aplicación perdemos los datos y nos desconectamos, teniendo que empezar de nuevo. Esto se debe a que nuestro token e identificación se almacenan en Vuex, que es javascript, y esto significa que nuestra aplicación se vuelve a cargar con el navegador cuando se actualiza.

Y finalmente, lo que haremos será recuperar el token dentro de nuestro almacenamiento local. Al hacerlo, podemos tener el token del usuario en el navegador, independientemente de cuándo actualicemos la ventana, y tener un método de inicio de sesión automático de nuestro usuario siempre que el token siga siendo válido.

Se crea un nuevo método de actions llamado AutoLogin , donde obtendremos el token y el userId de usuario del almacenamiento local y enviaremos nuestros datos al método authUser en las mutaciones.

 actions : { AutoLogin ({commit}) { const token = localStorage.getItem('token') if (!token) { return } const userId = localStorage.getItem('userId') const token = localStorage.getItem('token') commit('authUser', { idToken: token, userId: userId }) } }

Luego vamos a nuestro App.vue y escribimos un método created , que enviará el autoLogin de sesión automático desde nuestra tienda cada vez que se cargue la aplicación.

 created () { this.$store.dispatch('AutoLogin') }

Obtener_datos_de_usuario

Queremos dar la bienvenida al usuario en el tablero mostrando el nombre del usuario. Y así, se crea otra acción llamada fetchUser que primero verifica si hay un token como de costumbre. Luego, obtiene el correo electrónico del almacenamiento local y consulta la base de datos como se hizo anteriormente con la validación del correo electrónico.

Esto devuelve un objeto que contiene los datos del usuario enviados inicialmente durante el registro. Luego convertimos este objeto en una matriz y lo asignamos a la mutación storeUser creada inicialmente.

Después de lo cual creamos otro captador llamado user que devuelve el storeUser state.user

 getters: { user (state) { return state.user }, isAuthenticated (state) { return state.idToken !== null } }

Volviendo al tablero, creamos un nuevo método computado llamado name que devuelve state.user.name solo si el usuario existe.

Y también agregaremos la propiedad calculada created para enviar la acción fetchUser una vez que se cargue la página. Luego usamos el v-if en nuestro HTML para mostrar el nombre si existe.

 <p v-if="name">Welcome, {{ name }} </p>

Enviar_encuesta

Para enviar la encuesta, crearemos una acción postData que envíe los datos a la base de datos utilizando la API de la base de datos, con el token para mostrarle al servidor que el usuario ha iniciado sesión.

Volvemos al componente del tablero y enviamos los datos a nuestra acción postData en la tienda.

 methods : { onSubmit () { const postData = { price: this.price, long: this.long, comment: this.comment } console.log(postData) this.$store.dispatch('postData', postData) } }

Ahí lo tenemos, tenemos muchas funciones útiles implementadas en nuestra aplicación de demostración mientras nos comunicamos con nuestro servidor Firebase. Con suerte, utilizará estas potentes funciones en su próximo proyecto, ya que son muy importantes para crear aplicaciones web modernas en la actualidad.

Si tienes alguna pregunta, puedes dejarla en la sección de comentarios y estaré encantado de responder a cada una de ellas.

• La demostración del tutorial está disponible aquí.

Otros recursos que pueden resultar útiles incluyen:

• Para obtener más información sobre Firebase y los demás servicios que ofrece, consulte el artículo de Chris Esplin, "¿Qué es Firebase?"
• Vuelidate es una biblioteca realmente agradable en la que realmente deberías profundizar. Debe leer su documentación para obtener una visión completa. https://vuelidate.js.org/.
• También puede explorar axios por sí solo, especialmente si desea usarlo en proyectos más grandes.