반응 탐색을 사용하여 인증 흐름 작성

업데이트 날짜 : 2017 년 3 월 27 일

React Native School의 일부로이 기사의 업데이트 버전을 정리했습니다.

React Navigation을 사용하여 인증 흐름을 설정하는 방법에 대해 자주 묻는 메시지가 표시됩니다. 오늘 다룰 내용입니다. TabNavigator를 사용하여 사인 아웃 된 레이아웃과 두 화면 StackNavigator를 사용하여 사인 아웃 된 레이아웃이 있습니다.

이 앱의 UI를 처리하기 위해 React Native Elements를 사용할 것입니다.

개요

우리의 응용 프로그램은 이렇게 작동합니다 ...

사용자가 앱을 처음 열면 로그인 할 수있는 SignedOut 레이아웃이 표시됩니다 (로그인은 단순히 로그인 버튼을 누르는 것만으로 구성되며 나머지는 모두보기 만합니다). SignedIn 레이아웃에 로그인하면 SignedOut 레이아웃을 대체해야합니다. 사용자가 로그 아웃하지 않으면 스 와이프하거나 이전 레이아웃으로 돌아갈 수 없습니다.

사용자가 이전에 로그인 한 경우 앱으로 돌아올 때 즉시 SignedInlayout을 표시해야합니다.

로그 아웃하면 SignedOut 레이아웃이 다시 표시됩니다. 다시, 사용자는 로그인하지 않으면 SignedIn 레이아웃으로 돌아갈 수 없습니다.

따라

따라 가거나 최종 코드를 확인하려면 GitHub에서 프로젝트를 확인하십시오. 시작하려면 모든 화면이 이미 설정되어 있으며 라우팅 로직에만 중점을 둘 것입니다.

  • 시작 코드
  • 완성 된 코드

접근

앱 개요를 생각할 때 두 가지“레이아웃”이 필요하다는 것을 알고 있습니다. SignedOut 레이아웃은 StackNavigator로 표시 될 수 있습니다. SignedIn 레이아웃은 TabNavigator로 표시됩니다 (DrawerNavigator를 대신 사용할 수 있음).

또한 표시 할 초기 레이아웃을 결정하는 방법이 필요합니다. 앱의 기본 진입 점 (app / index.js)에서이를 처리합니다. 사용자가 이전에 로그인했는지 여부를 추적하려면 AsyncStorage를 사용하십시오. 로그인 할 때이를 알려주는 키를 설정합니다.

마지막으로 기본 레이아웃을 변경하는 데 사용할 루트 SwitchNavigator가 필요합니다.

SignedOut 레이아웃 설정

먼저 SignedOut 레이아웃을 설정하겠습니다. app / router.js에서 SignIn 및 SignUp 화면을 사용하여 새 StackNavigator를 만듭니다.

또한 앱 진입 점에서이 SignedOut 구성 요소를 사용하려고합니다.

마지막으로 "로그인"버튼을 누를 때 SignUp.js를 업데이트하여 로그인 화면으로 이동하십시오.

이런 식으로 떠나야합니다

SignedIn 레이아웃 설정

이제 SignedIn 레이아웃에 대한 TabNavigator를 설정하겠습니다.

그런 다음 진입 점에서 렌더링

다음과 같이 떠나기

추적 로그인 상태

다양한 레이아웃을 만들었으므로 app / auth.js에서 발생하는 로그인 로직을 먼저 처리하겠습니다. 이것은 순수하게 데모를위한 것입니다. 분명히 실제 인증 시스템에 연결하고 싶을 것입니다.

onSignIn 및 onSignOut 함수의 경우 AsyncStorage에 쓰거나 제거하고 있습니다. isSignedIn 함수에서 약속을 반환하고 있으며 그 약속에서 "USER_KEY"의 존재를 확인합니다. 존재하는 경우 (로그인 한 경우) 약속에서 true를 해결하고, 그렇지 않으면 false를 해결합니다.

모든 로그인 로직을 한 곳에 유지하기 위해 이러한 추상화를 만들었습니다.

그런 다음 app / index.js를 업데이트하여 렌더링 할 레이아웃을 결정할 때이 정보를 호출하고 사용할 수 있습니다.

componentDidMount에서 isSignedIn 함수를 호출하여이 사용자가 이전에 로그인했는지 여부를 확인한 다음 해당 정보로 구성 요소 상태를 업데이트합니다. 또한 구성 요소에 확인한 후 해당 기능에서 응답을 받았습니다.

그런 다음 렌더링 방법에서 구성 요소 상태를 사용하여 렌더링 대상을 결정합니다. 여전히 함수의 응답을 기다리는 경우 null을 렌더링하므로 잘못된 레이아웃이 깜박이지 않습니다. 나머지는 자명하다.

Sign Up / In 및 Sign Out 버튼은 이미 onSignInand onSignUp 함수를 호출하고 있으므로이를 테스트 할 수 있습니다. 버튼을 누르면 아무 것도 눈치 채지 못하지만 앱을 새로 고치면 새로운 레이아웃이 렌더링됩니다.

루트 탐색기 구성

우리는 루트를 위해 새로운 SwitchNavigator를 만들 것입니다. 그러나 실제로 새 루트 탐색기를 반환하는 함수를 만들고 로그인 상태에 따라 초기 경로를 변경할 수 있습니다.

내 다른“레이아웃”이이 탐색기의 화면임을 알 수 있습니다. 가장 큰 차이점은 이것을 함수에 싸서 함수의 signedIn 인수로 초기 경로를 결정한다는 것입니다.

그런 다음 앱 진입 점에서 호출 할 수 있습니다.

네비게이터를 사용하여 이전과 동일한 경험을 제공합니다.

이제 SignIn.js 또는 SignUp.js에서 onSignIn에 대한 호출을 업데이트하여 반환 된 약속을 해결하면 SignedIn 레이아웃으로 이동하면 다음과 같은 상호 작용이 발생합니다.

그 코드는 다음과 같습니다

마찬가지로 Profile.js와 반대로 할 수 있습니다

이 접근 방식에 대해 주목하고 싶은 한 가지 사항은 createRootNavigator를 호출하는 파일에서 내비게이션 상태라고 할 때마다 손실되기 때문에 의도적으로 고의적으로 렌더링해야한다는 점입니다.

React Navigation을 사용할 때 인증 흐름을 어떻게 처리합니까?

React Native의 다른 일반적인 작업에 대한 전략이 궁금하십니까? 많은 React Native 코스 중 하나를 확인하십시오!