Creazione di un flusso di autenticazione con navigazione React

Aggiornato: 27 marzo 2017

Ho messo insieme una versione aggiornata di questo articolo come parte di React Native School.

Mi viene chiesto abbastanza spesso di impostare un flusso di autenticazione con React Navigation. Questo è ciò che tratteremo oggi: avremo due "layout", un layout firmato con un TabNavigator e un layout disconnesso con un StackNavigator a due schermi.

Userò React Native Elements per gestire l'interfaccia utente di questa app.

Panoramica

La nostra app funzionerà in questo modo ...

Quando l'utente apre per la prima volta l'app mostreremo loro il layout di SignedOut in cui potranno quindi accedere (l'accesso consisterà semplicemente nel premere il pulsante di accesso, tutto il resto sarà solo per i look). Quando si accede al layout SignedIn, è necessario sostituire il layout SignedOut. Un utente non dovrebbe essere in grado di scorrere o tornare al layout precedente se non si disconnette.

Se un utente ha effettuato l'accesso in precedenza, dovremmo mostrare immediatamente SignedInlayout quando tornano all'app.

Al momento della disconnessione, il layout SignedOut dovrebbe essere nuovamente visibile. Ancora una volta, un utente non dovrebbe essere in grado di tornare al layout SignedIn a meno che non acceda.

Seguendo Lungo

Se vuoi seguire o controllare il codice finalizzato, puoi farlo controllando il progetto su GitHub. Per iniziare, tutte le schermate saranno già configurate e ci concentreremo esclusivamente sulla logica di routing.

  • Codice di partenza
  • Codice finito

Approccio

Pensando alla panoramica delle app sappiamo che abbiamo bisogno di due "layout". Il layout SignedOut può essere rappresentato da StackNavigator. Il layout SignedIn sarà rappresentato da un TabNavigator (al suo posto è possibile utilizzare facilmente un DrawerNavigator).

Abbiamo anche bisogno di un modo per determinare quale layout iniziale viene mostrato: lo gestiremo nel punto di ingresso principale dell'app (app / index.js). Per tenere traccia del fatto che l'utente abbia precedentemente effettuato l'accesso o meno verrà realizzato con AsyncStorage. Quando effettuiamo l'accesso, imposteremo una chiave per notarlo.

Infine, abbiamo bisogno di un SwitchNavigator di root che useremo per modificare i layout principali.

Impostazione del layout SignedOut

Per prima cosa imposteremo il nostro layout SignedOut. In app / router.js crea un nuovo StackNavigator con le schermate SignIn e SignUp.

Ti consigliamo inoltre di utilizzare questo componente SignedOut nel punto di ingresso dell'app.

Infine, aggiorna SignUp.js a, quando premi il pulsante "Accedi", vai alla schermata Accedi.

Ciò dovrebbe partire con qualcosa del genere

Impostazione del layout firmato

Ora impostiamo TabNavigator per il layout SignedIn.

Quindi renderlo dal punto di ingresso

Lasciando con il seguente

Monitoraggio dello stato di accesso

Ora che abbiamo messo insieme i nostri diversi layout, gestiamo prima la nostra logica di accesso, che si svolge in app / auth.js. Questo è puramente a scopo dimostrativo - ovviamente vorrai collegarti a un vero sistema di autenticazione nella realtà.

Per le funzioni onSignIn e onSignOut scrivo o rimuovo da AsyncStorage. Nella funzione isSignedIn sto restituendo una promessa e in quella promessa controllo l'esistenza di "USER_KEY" - se esiste (nel senso che siamo loggati) risolvo vero dalla promessa, altrimenti risolvo falso.

Ho creato queste astrazioni per mantenere tutta la nostra logica di accesso in un unico posto.

Possiamo quindi aggiornare l'app / index.js per chiamare e usare queste informazioni per determinare quale layout rendere.

In componentDidMount faccio una chiamata alla funzione isSignedIn per verificare se questo utente è stato precedentemente registrato e quindi aggiornare lo stato del componente con tali informazioni. Dico anche al mio componente che abbiamo verificato e ottenuto una risposta da quella funzione.

Quindi uso lo stato del componente nel mio metodo di rendering per determinare cosa dovrebbe essere reso. Se stiamo ancora aspettando una risposta dalla funzione, renderò null quindi non ci sono flash con layout errato. Il resto è autoesplicativo.

Poiché i nostri pulsanti Iscriviti / Esci e Esci stanno già chiamando le funzioni onSignInand onSignUp, possiamo provarlo. Quando premi il pulsante non noterai nulla, ma se aggiorni l'app noterai il nuovo layout renderizzato.

Configurazione del navigatore principale

Creeremo un nuovo SwitchNavigator per il nostro root. Tuttavia, creeremo una funzione che restituisce effettivamente il nuovo navigatore principale e possiamo modificare il percorso iniziale in base allo stato di accesso.

Puoi vedere che i miei diversi "layout" sono gli schermi di questo navigatore. La grande differenza è che l'ho racchiuso in una funzione e determino il percorso iniziale dall'argomento signedIn della funzione.

Posso quindi chiamarlo dal mio punto di ingresso dell'app in questo modo.

Questo darà esattamente la stessa esperienza di prima, usando solo un navigatore.

Ora, se aggiorno la chiamata a onSignIn in SignIn.js o SignUp.js a, dopo aver risolto la promessa restituita, accedo al layout SignedIn e ottengo la seguente interazione.

Il codice per questo assomiglia a questo

Allo stesso modo possiamo fare il contrario per Profile.js

Una cosa che voglio notare su questo approccio è che devi essere intenzionale e molto consapevole di un nuovo rendering nel file che chiami createRootNavigator perché ogni volta che viene chiamato il tuo stato di navigazione andrà perso.

Come gestite il flusso di autenticazione quando utilizzate React Navigation?

Curioso delle mie strategie per altri compiti comuni in React Native? Dai un'occhiata a uno dei miei tanti corsi nativi di React!