Implementación del Logout de Usuario en React Native Usando Relay

11 min

cierre de sesión del usuario en react native introducción en este paso crearás el cierre de sesión del usuario para react native utilizando relay, la última implementación para esta sección de usuarios este paso es simple y seguiremos nuestra guía de cierre de sesión de graphql https //www back4app com/docs/parse graphql/graphql logout mutation de nuestro recetario de graphql implementarás la mutación de cierre de sesión y la llamarás usando un botón en la aplicación de react native en cualquier momento, puedes acceder a este proyecto a través de nuestros repositorios de github para revisar los estilos y el código completo repositorio de ejemplo en javascript objetivo para implementar la función de cierre de sesión en nuestra aplicación react native utilizando relay y la api graphql de back4app requisitos previos para este tutorial utilizaremos el servidor parse en la versión 4 4 si deseas usar otras versiones, puedes consultar el código de mutación correspondiente en guía de cierre de sesión de graphql como ejemplo para tu respectiva versión debes concluir el tutorial de configuración del entorno relay debes concluir el ejemplo de inicio de sesión en react native usando relay debes concluir el usuario de react native conectado para este tutorial, vamos a usar expo como marco de trabajo de react native; para este tutorial, vamos a usar javascript como nuestro lenguaje de implementación predeterminado; 1 creando la mutación de cierre de sesión regresamos a la carpeta de ingreso, dentro de la carpeta de mutaciones crea un nuevo archivo y llámalo logoutmutation js logoutmutation js copia y pega el siguiente código dentro 1 import { commitmutation, graphql } from 'react relay'; 2	 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10	 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13	 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21	 22 export default { 23 commit, 24 }; ejecuta yarn relay yarn relay en tu terminal para actualizar los tipos de relay 2 creando el botón de cerrar sesión ahora, abre el formsignin js formsignin js componente vamos a agregar el botón de cerrar sesión y llamar a la mutación de relay importa la nueva mutación de relay al principio del archivo 1 import logoutmutation from " /mutations/logoutmutation"; luego, crea la función responsable de llamar a la mutación de cerrar sesión 1 const handlelogout = async () => { 2 logoutmutation commit({ 3 environment environment, 4 input {}, 5 oncompleted async () => { 6 await asyncstorage removeitem('sessiontoken'); 7 setsessiontoken(null); 8 alert('user successfully logged out'); 9 }, 10 onerror (errors) => { 11 alert(errors\[0] message); 12 }, 13 }); 14 }; ¿qué está sucediendo en oncompleted oncompleted está eliminando el token de sesión de async storage porque ya no es válido está limpiando el usestate local que recupera el token de sesión por la misma razón anterior una alerta diciendo que el usuario fue desconectado con éxito después, justo debajo de userloggedrenderer, implementemos el botón responsable de llamar a la desconexión de 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } para 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } importa el botón de la librería react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; la pantalla de la aplicación debería verse así 3 pruebas probando el botón, al hacer clic debería realizarse el cierre de sesión y aparecer una alerta y, después debería regresar a la página de inicio de sesión conclusión ahora has implementado las principales características de autenticación de usuarios necesarias para cualquier aplicación tus usuarios ahora pueden registrarse, iniciar sesión, navegar en el área autenticada y cerrar sesión en tu aplicación de react native utilizando relay y la api graphql de back4app