Implementa Logout Utente in React Native con GraphQL Relay

10 min

disconnessione utente react native introduzione in questo passaggio creerai la disconnessione dell'utente per react native utilizzando relay, l'ultima implementazione per questa sezione dell'utente questo passaggio è semplice e seguiremo la nostra guida alla disconnessione graphql https //www back4app com/docs/parse graphql/graphql logout mutation dal nostro cookbook graphql implementerai la mutazione di disconnessione e la chiamerai utilizzando un pulsante nell'applicazione react native in qualsiasi momento, puoi accedere a questo progetto tramite i nostri repository github per controllare gli stili e il codice completo repository di esempio javascript obiettivo per implementare la funzionalità di logout nella nostra app react native utilizzando relay e l'api graphql di back4app prerequisiti per questo tutorial utilizzeremo il parse server nella versione 4 4 se desideri utilizzare altre versioni, puoi controllare il codice di mutazione corrispondente a guida al logout graphql esempio per la tua rispettiva versione devi concludere il tutorial di configurazione dell'ambiente relay devi concludere il esempio di login react native utilizzando relay devi concludere il utente react native loggato per questo tutorial, utilizzeremo expo come framework react native; per questo tutorial, utilizzeremo javascript come nostro linguaggio di implementazione predefinito; 1 creazione della mutazione di logout tornando nella cartella signin, all'interno della cartella delle mutazioni crea un nuovo file e chiamalo logoutmutation js logoutmutation js copia e incolla il seguente codice all'interno 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 }; esegui yarn relay yarn relay nel tuo terminale per aggiornare i tipi di relay 2 creazione del pulsante di disconnessione ora, apri il formsignin js formsignin js componente aggiungiamo il pulsante di disconnessione e chiamiamo la mutazione relay importa la nuova mutazione relay all'inizio del file 1 import logoutmutation from " /mutations/logoutmutation"; poi, crea la funzione responsabile di chiamare la mutazione logout 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 }; cosa sta succedendo in oncompleted oncompleted sta rimuovendo il token di sessione da async storage perché non è più valido sta pulendo il usestate locale che recupera il token di sessione per lo stesso motivo sopra un avviso che dice che l'utente è stato disconnesso con successo dopo, subito sotto il userloggedrenderer, implementiamo il pulsante responsabile di chiamare il logout da 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } per 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } importa il pulsante dalla libreria react native import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; lo schermo dell'applicazione dovrebbe apparire così 3 test testando il pulsante, quando cliccato dovrebbe effettuare il logout e apparire un avviso e, dopo, dovrebbe tornare alla pagina di accesso conclusione ora hai implementato le principali funzionalità di autenticazione degli utenti necessarie per qualsiasi app i tuoi utenti possono ora registrarsi, accedere, navigare nell'area autenticata e disconnettersi dalla tua app react native utilizzando relay e l'api graphql di back4app