리액트 네이티브 Relay 로그아웃 구현 가이드

10 분

리액트 네이티브 사용자 로그아웃 소개 이 단계에서는 relay를 사용하여 리액트 네이티브의 사용자 로그아웃을 생성합니다 이는 이 사용자의 섹션에 대한 마지막 구현입니다 이 단계는 간단하며 우리는 graphql 로그아웃 가이드 https //www back4app com/docs/parse graphql/graphql logout mutation 를 우리의 graphql 요리책에서 따를 것입니다 로그아웃 뮤테이션을 구현하고 리액트 네이티브 애플리케이션의 버튼을 사용하여 호출할 것입니다 언제든지 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 자바스크립트 예제 저장소 목표 relay와 back4app graphql api를 사용하여 react native 앱에 로그아웃 기능을 구현합니다 전제 조건 이 튜토리얼에서는 4 4 버전의 parse server를 사용할 것입니다 다른 버전을 사용하고 싶다면 graphql 로그아웃 가이드 에 대한 해당 변형 코드를 확인할 수 있습니다 다음의 relay 환경 설정 튜토리얼 다음의 relay를 사용한 react native 로그인 샘플 다음의 react native 사용자 로그인 이 튜토리얼에서는 expo를 react native 프레임워크로 사용할 것입니다; 이 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다; 1 로그아웃 변형 만들기 다시 signin 폴더로 돌아가서 mutations 폴더에 새 파일을 만들고 이름을 logoutmutation js logoutmutation js 로 지정합니다 다음 코드를 복사하여 붙여넣으세요 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 }; 터미널에 yarn relay yarn relay 를 실행하여 릴레이 타입을 업데이트하세요 2 로그아웃 버튼 만들기 이제 formsignin js formsignin js 컴포넌트를 엽니다 로그아웃 버튼을 추가하고 릴레이 뮤테이션을 호출해 보겠습니다 파일의 시작 부분에 새로운 릴레이 뮤테이션을 가져옵니다 1 import logoutmutation from " /mutations/logoutmutation"; 그런 다음 로그아웃 뮤테이션을 호출하는 함수를 만듭니다 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 }; 무슨 일이 일어나고 있는가 oncompleted oncompleted 세션 토큰이 더 이상 유효하지 않기 때문에 async storage에서 제거하고 있습니다 위와 같은 이유로 세션 토큰을 가져오는 로컬 usestate를 정리하고 있습니다 사용자가 성공적으로 로그아웃되었다는 알림을 표시합니다 그 후, userloggedrenderer 바로 아래에 로그아웃을 호출하는 버튼을 구현해 보겠습니다 에서 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } 에 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } react native 라이브러리에서 버튼을 가져옵니다 import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; 애플리케이션 화면은 다음과 같아야 합니다 3 테스트 버튼을 테스트할 때, 클릭하면 로그아웃이 이루어지고 알림이 나타나야 합니다 그리고, 이후에는 로그인 페이지로 돌아가야 합니다 결론 이제 여러분은 모든 앱에 필요한 주요 사용자 인증 기능을 구현했습니다 사용자는 이제 relay와 back4app graphql api를 사용하여 react native 앱에서 가입, 로그인, 인증된 영역 탐색 및 로그아웃할 수 있습니다