Opbygning af en godkendelsesstrøm med reaktionsnavigation

Opdateret: 27. marts, 2017

Jeg har sammensat en opdateret version af denne artikel som en del af React Native School.

Jeg bliver temmelig ofte spurgt om opsætning af en godkendelsesstrøm med React Navigation. Det er det, vi vil dække i dag - vi har to "layouts" en logget ind layout med en TabNavigator og en logget ud layout med en to-skærm StackNavigator.

Jeg bruger React Native Elements til at håndtere UI til denne app.

Oversigt

Vores app fungerer sådan ...

Når brugeren først åbner appen, viser vi dem SignedOut-layoutet, hvor de derefter kan logge ind (logge ind vil simpelthen bestå af at trykke på login-knappen, alt andet er bare for udseende). Når du er logget ind, skal SignedIn-layout erstatte SignedOut-layout. En bruger skal ikke være i stand til at skubbe eller gå tilbage til det forrige layout, medmindre de logger ud.

Hvis en bruger tidligere er logget ind, skal vi vise dem SignedInlayout øjeblikkeligt, når de kommer tilbage til appen.

Når du logger ud, skal SignedOut-layout derefter være synligt igen. Igen skulle en bruger ikke være i stand til at gå tilbage til SignedIn-layout, medmindre de logger på.

Følger

Hvis du vil følge med eller tjekke den færdige kode, kan du gøre det ved at tjekke projektet på GitHub. For at komme i gang er alle skærmbilleder allerede konfigureret, og vi fokuserer udelukkende på routinglogikken.

  • Startkode
  • Færdig kode

Nærme sig

Når vi tænker på appoversigten, vi ved, at vi har brug for to "layouts". SignedOut-layoutet kan repræsenteres af en StackNavigator. SignedIn-layoutet repræsenteres af en TabNavigator (du kan nemt bruge en DrawerNavigator i stedet).

Vi har også brug for en måde at bestemme, hvilket indledende layout der vises - vi håndterer det i det primære indgangspunkt for appen (app / index.js). For at holde styr på, om brugeren tidligere har logget ind eller ej, gennemføres med AsyncStorage. Når du logger ind, indstiller vi en nøgle til at notere det.

Endelig har vi brug for en root SwitchNavigator, som vi vil bruge til at ændre primære layout.

Opsætning af SignedOut-layout

Først konfigurerer vi vores SignedOut-layout. Opret i app / router.js en ny StackNavigator med skærmbilledet SignIn og SignUp.

Du vil også bruge denne SignedOut-komponent i appens indgangspunkt.

Endelig skal du opdatere SignUp.js til, når du trykker på knappen "Log ind", skal du navigere til skærmbilledet Log på.

Det skulle efterlade med noget lignende

Opsætning af underskrevet layout

Lad os nu konfigurere TabNavigator til SignedIn-layout.

Gør det derefter fra indgangspunktet

Forlader med følgende

Tracking Log In State

Nu hvor vi har sammensat vores forskellige layouts, lad os først håndtere vores login-logik, der finder sted i app / autor.js. Dette er udelukkende for demonstrationens skyld - selvfølgelig vil du ønske at tilslutte dig et rigtigt autoritetssystem i virkeligheden.

Til funktionerne onSignIn og onSignOut skriver jeg enten til eller fjerner jeg fra AsyncStorage. I isSIGNIn-funktionen returnerer jeg et løfte, og i det løfte kontrollerer jeg for eksistensen af ​​"USER_KEY" - hvis det findes (hvilket betyder, at vi er logget ind) løser jeg sandt fra løftet, ellers løser jeg falske.

Jeg oprettede disse abstraktioner for at holde al vores login-logik ét sted.

Vi kan derefter opdatere app / index.js til at ringe til og bruge disse oplysninger til at bestemme, hvilket layout der skal gengives.

I componentDidMount ringer jeg til isSIGNIn-funktionen for at kontrollere, om denne bruger tidligere var logget ind og derefter opdatere komponenttilstanden med disse oplysninger. Jeg fortæller også min komponent, at vi har kontrolleret og har fået et svar tilbage fra denne funktion.

Jeg bruger derefter komponenttilstanden i min render-metode til at bestemme, hvad der skal gengives. Hvis vi stadig venter på et svar fra funktionen, gengiver jeg null, så der ikke er nogen blitz på det forkerte layout. Resten er selvforklarende.

Da vores Sign Up / In- og Sign Out-knapper allerede kalder onSignInand onSignUp-funktionerne, kan vi teste dette. Når du trykker på knappen, vil du ikke bemærke noget, men hvis du opdaterer appen, vil du bemærke det nye layout, der er gengivet.

Konfiguration af rodnavigatoren

Vi vil oprette en ny SwitchNavigator til vores rod. Vi vil dog oprette en funktion, der faktisk returnerer den nye rodnavigator, og vi kan ændre den indledende rute afhængigt af den tilmeldte tilstand.

Du kan se, at mine forskellige "layouts" er skærmbilledet for denne navigator. Den store forskel er, at jeg har indpakket dette i en funktion, og jeg bestemmer den indledende rute ved hjælp af det signerede In-argument for funktionen.

Jeg kan derefter kalde det fra mit appindgangspunkt sådan.

Dette giver den nøjagtige samme oplevelse, som vi havde før, bare ved hjælp af en navigator.

Hvis jeg nu opdaterer opkaldet til onSignIn i SignIn.js eller SignUp.js til, når jeg løser det returnerede løfte, skal jeg navigere til SignedIn-layoutet og få følgende interaktion.

Koden til det ser sådan ud

På samme måde kan vi gøre det modsatte for Profile.js

Én ting, jeg vil bemærke om denne tilgang, er, at du er nødt til at være forsætlig og meget opmærksom på en gengivelse i filen, du kalder createRootNavigator, fordi hver gang den kaldes din nav-stat vil gå tabt.

Hvordan håndterer du godkendelsesstrømmen, når du bruger React Navigation?

Er du nysgerrig efter mine strategier for andre almindelige opgaver i React Native? Checkout et af mine mange React Native kurser!