Actualizar el perfil del usuario
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- En esta lección vamos a gestionar el perfil de los usuarios/as de VueTalk. Vamos a permitir que la persona conectada puede editar su nombre, correo electrónico y contraseña.
- Como puedes comprobar, en la documentación de Firebase Auth existe una sección donde se trata lo esencial del manejo de usuarios. Algunos métodos y propiedades ya las conoces, como
onAuthStateChanged
ocurrentUser
. Ahora aprenderás a utilizar nuevas opciones para cambiar otras propiedades del usuario. - Pero primero debemos crear la vista que nos permita realizar esas acciones. La llamaremos
UserProfileView.vue
y dentro usaremos un formulario donde pre-cargaremos los datos del usuario conectado. Este componente contendrá un modelo local para guardar las modificaciones de las propiedades del perfil de usuario. Usaremos los map helpers de Vuex para mostrar el contenido sólo si hay un usuario conectado.
import { mapState } from "vuex";
...
data() {
return {
isLoading: false,
userData: {
name: "",
email: "",
password: ""
}
};
},
methods: {
updateProfile() {
...
}
},
computed: {
...mapState("user", ["user"]),
hasDataChanged(){}
}
...
- Así como un método, llamado
updateProfile
para lanzar el proceso de actualización, pero antes de crearlo tenemos establecer la acción en nuestro módulo Vuex que responderá al otro lado. Enuser.js
creamos la acciónupdateProfile
, establecemos sus parámetros y, haciendo uso de los métodos descritos en la documentación, cambiamos lo que sea necesario.
async updateProfile({ commit }, { name, email, password }) {
const user = auth.currentUser;
if (name) {
await user.updateProfile({
displayName: name
});
if (email) {
await user.updateEmail(email);
}
if (password) {
await user.updatePassword(password);
}
commit("setUser", user);
}
};
- Ahora es el momento de completar el método local
updateProfile
de nuestra vistaUserRoomProfile
para hacer la llamada a la acción que hemos creado hace un momento.
updateProfile() {
this.isLoading = true;
try {
await this.$store.dispatch("user/updateProfile", {
name: this.userData.name,
email: this.userData.email,
password: this.userData.password
});
this.$toast.success("Account data updated");
this.userData.name = this.userData.email = this.userData.password = "";
} catch (error) {
this.$toast.error(error.message);
console.error(error.message);
} finally {
this.isLoading = false;
}
}
- Como medida extra, en
hasDataChanged
vamos a preguntar si ha cambiado algo en la información del usuario, para permitirle lanzar el formulario sólo en ese caso.
hasDataChanged() {
return (
(this.userData.name && this.userData.name !== this.user.displayName) ||
(this.userData.email && this.userData.email !== this.user.email) ||
this.userData.password.length
);
}
- Por último, nos queda crear la nueva ruta en Vue Router. Para ello abrimos
router/index.js
y establecemos la nueva ruta, protegiéndola con autentificación.
import UserProfileView from "../views/UserProfileView.vue";
...
{
path: "/profile",
name: "profile",
component: UserProfileView,
meta: {
requiresAuth: true
}
},
...
- Ahora añadimos la nueva ruta en el componente
NavBarComponent
con:to="{ name: 'profile' }"
en el botón correspondiente, y comprobamos que todo funcione correctamente.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.