Autentikointivirran rakentaminen React-navigoinnin avulla

Päivitetty: 27. maaliskuuta 2017

Olen koonnut päivitetyn version tästä artikkelista osana React Alkuperäiskuntaa.

Minulta kysytään melko usein todennusvuojen määrittämisestä React Navigation -sovelluksella. Tätä me kattaa tänään - meillä on kaksi “asettelua”: sisäänkirjautunut asettelu TabNavigatorilla ja kirjautunut ulkoasu kahden näytön StackNavigatorilla.

Käytän React Native Elements -sovellusta tämän sovelluksen käyttöliittymän käsittelemiseen.

Yleiskatsaus

Sovelluksemme toimii niin ...

Kun käyttäjä avaa sovelluksen ensimmäisen kerran, me näytämme hänelle SignedOut-asettelun, jossa he voivat kirjautua sisään (kirjautuminen koostuu yksinkertaisesti kirjautumispainikkeen painamisesta, kaikki muu on vain ulkonäköä). Kun olet kirjautunut sisään, SignedIn-asettelun tulisi korvata SignedOut-asettelu. Käyttäjän ei pitäisi pystyä pyyhkäisemään tai palaamaan takaisin edelliseen asetteluun, ellei hän kirjaudu ulos.

Jos käyttäjä on aikaisemmin kirjautunut sisään, meidän pitäisi näyttää heille SignedInlayout heti, kun he palaavat sovellukseen.

Kun kirjaudut ulos, SignedOut-asettelun pitäisi sitten olla uudelleen näkyvissä. Käyttäjän ei pitäisi voida palata takaisin sisäänkirjautuneen asetteluun, ellei hän kirjaudu sisään.

Seurataan pitkin

Jos haluat seurata tai tarkistaa viimeistellyn koodin, voit tehdä sen tarkistamalla projektin GitHubissa. Aloittamiseksi kaikki näytöt on jo asetettu ja keskitymme yksinomaan reitityslogiikkaan.

  • Lähtökoodi
  • Valmis koodi

Lähestyä

Sovellessamme sovelluksen yleiskatsausta tiedämme, että tarvitsemme kaksi “asettelua”. SignedOut-asettelua voi edustaa StackNavigator. SignedIn-asettelua edustaa TabNavigator (voit käyttää helposti DrawerNavigatoria).

Tarvitsemme myös tavan määrittää, mikä alkuperäinen asettelu näytetään - käsittelemme sitä sovelluksen ensisijaisessa sisääntulopisteessä (app / index.js). AsyncStorage -sovelluksella seurataan, onko käyttäjä aiemmin kirjautunut sisään vai ei. Sisäänkirjautumisen yhteydessä asetamme avaimen ilmoittaa siitä.

Lopuksi tarvitsemme juurihakemiston SwitchNavigatorin, jota käytämme ensisijaisten asetteluiden muuttamiseen.

SignedOut-asettelun määrittäminen

Aluksi määritämme SignedOut-asettelumme. Luo sovelluksessa / router.js uusi StackNavigator kirjautumis- ja kirjautumisnäytöillä.

Haluat myös käyttää tätä SignedOut-komponenttia sovelluksen sisääntulopisteessä.

Päivitä lopuksi SignUp.js, kun painat "Kirjaudu sisään" -painiketta, navigoida Kirjaudu sisään -näyttöön.

Sen pitäisi jäädä jotain tällaista

Sisäänkirjautuneen asettelun määrittäminen

Asennetaan nyt TabNavigator SignedIn-asetteluun.

Tee sitten se tulopisteestä

Seuraavat seuraavien kanssa

Seuraa sisäänkirjautumisen tilaa

Nyt kun olemme saaneet erilaiset asettelut koottuna, käsittelemme ensin kirjautumislogiikkaamme, joka tapahtuu sovelluksessa / auth.js. Tämä on pelkästään esittelyn takia - tietysti haluat koukkua todelliseen todennusjärjestelmään todellisuudessa.

OnSignIn- ja onSignOut-toimintojen osalta joko kirjoitan AsyncStorage-palveluun tai poistan siitä. Palautan isSignedIn-toiminnossa lupauksen ja tarkastan siinä luettelon "USER_KEY" olemassaolon - jos se on olemassa (eli olemme kirjautuneena sisään), ratkaisen totta lupauksesta, muuten ratkaisen väärän.

Loin nämä abstraktiot pitääksemme kaikki sisäänkirjautumislogiikkamme yhdessä paikassa.

Voimme sitten päivittää sovelluksen / index.js soittaaksesi ja käyttääksemme näitä tietoja määritettäessä, mikä asettelu esitetään.

Soitan komponenttiDidMount-sovelluksessa isSignedIn-toimintoon tarkistaaksesi, onko tämä käyttäjä aikaisemmin kirjautunut sisään, ja päivittää sitten komponentin tila näillä tiedoilla. Sanon myös komponentilleni, että olemme tarkistaneet ja saaneet vastauksen takaisin toiminnosta.

Käytän sitten komponenttitilaa renderöintimenetelmässäni määrittääkseni, mitä pitäisi hahmontaa. Jos odotamme edelleen vastausta toiminnolta, muuten nollaksi, joten väärän asettelun välähdyksiä ei ole. Loppuosa on itsestään selvä.

Koska Sign Up / In ja Sign Out -painikkeet kutsuvat jo onSignInand onSignUp -toimintoja, voimme testata tämän. Kun painat painiketta, et huomaa mitään, mutta jos päivität sovelluksen, huomaat uuden renderoidun asettelun.

Root Navigatorin määrittäminen

Aiomme luoda uuden SwitchNavigator -sovelluksen juurillemme. Aiomme kuitenkin luoda funktion, joka tosiasiallisesti palauttaa uuden juurinavigaattorin, ja voimme muuttaa alkuperäisen reitin kirjautuneen tilan mukaan.

Voit nähdä, että erilaiset “asetteluni” ovat tämän navigaattorin näytöt. Suuri ero on, että olen käärityt tämän funktioon ja määritän alkuperäisen reitin funktion allekirjoitetun argumentin avulla.

Voin sitten kutsua sitä sovelluksen sisääntulopisteestä niin.

Tämä antaa täsmälleen saman kokemuksen kuin meillä oli aikaisemmin, vain käyttämällä navigaattoria.

Nyt jos päivitän onSignIn-puhelun SignIn.js: ssä tai SignUp.js: ssä, kun palautetun lupauksen ratkaisemisen jälkeen selataan SignedIn-asetteluun, saan seuraavan vuorovaikutuksen.

Tämän koodi näyttää tältä

Samoin voimme tehdä päinvastaisen profiilin.js kanssa

Yksi asia, jonka haluan huomata tästä lähestymistavasta, on, että sinun on oltava tarkoituksellinen ja erittäin tietoinen uudelleenmuodostuksesta tiedostossa, jota kutsut createRootNavigatoriksi, koska aina, kun sitä kutsutaan, nav-tila katoaa.

Kuinka käsittelet todennusvirtaa käyttäessäsi React Navigation -sovellusta?

Oletko kiinnostunut muista React Native -tapahtumien strategioistani? Kassalle yksi monista React Native -kursseistani!