리액트 네이티브 Relay 로그아웃 구현 가이드
리액트 네이티브 사용자 로그아웃
소개
이 단계에서는 Relay를 사용하여 리액트 네이티브의 사용자 로그아웃을 생성합니다. 이는 이 사용자의 섹션에 대한 마지막 구현입니다. 이 단계는 간단하며 우리는 GraphQL 로그아웃 가이드를 우리의 GraphQL 요리책에서 따를 것입니다. 로그아웃 뮤테이션을 구현하고 리액트 네이티브 애플리케이션의 버튼을 사용하여 호출할 것입니다.
언제든지 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다.
목표
Relay와 Back4App GraphQL API를 사용하여 React Native 앱에 로그아웃 기능을 구현합니다.
전제 조건
- 이 튜토리얼에서는 4.4 버전의 Parse Server를 사용할 것입니다. 다른 버전을 사용하고 싶다면 GraphQL 로그아웃 가이드에 대한 해당 변형 코드를 확인할 수 있습니다.
- 이 튜토리얼에서는 Expo를 React Native 프레임워크로 사용할 것입니다;
- 이 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다;
1 - 로그아웃 변형 만들기
다시 SignIn 폴더로 돌아가서 mutations 폴더에 새 파일을 만들고 이름을 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를 실행하여 릴레이 타입을 업데이트하세요:
2 - 로그아웃 버튼 만들기
이제 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:
- 세션 토큰이 더 이상 유효하지 않기 때문에 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";
애플리케이션 화면은 다음과 같아야 합니다:
3 - 테스트
버튼을 테스트할 때, 클릭하면 로그아웃이 이루어지고 알림이 나타나야 합니다:
그리고, 이후에는 로그인 페이지로 돌아가야 합니다:
결론
이제 여러분은 모든 앱에 필요한 주요 사용자 인증 기능을 구현했습니다. 사용자는 이제 Relay와 Back4App GraphQL API를 사용하여 React Native 앱에서 가입, 로그인, 인증된 영역 탐색 및 로그아웃할 수 있습니다.