[ReactNative] Auth / 로그인, 로그아웃 구현하기

요약

1. AsyncStorage 를 사용해서 기기에 로그인 정보를 저장합니다.

2. 토큰을 검증하고 유효한 토큰이 있다면 자동으로 로그인합니다.

3. 토큰이 없다면 로그인 화면으로 넘어갑니다.

---

 

 

3개 파일로 구성

 

LoginPage -> 로그인 화면입니다.

Splash -> 로그인이 되어있는지 검증하는 페이지입니다(로딩 페이지)

VerifyToken -> 토큰을 검증하는 등의 메소드가 들어있는 파일입니다

 

 

LoginPage.js

import { View, Text, StyleSheet,Image, Dimensions, TouchableOpacity } from 'react-native';
import { getTokens } from './VerifyToken';

const test_login = ( num, nav ) =>{
    getTokens('test'+num+'@test.com', 1234, nav);
    
} 

function LoginPage({navigation}) {
    return (
        <View style={styles.body}>
            <Image ...

 

개발 중 테스트를 위해 테스트 계정을 사용했습니다.

./VerifyToken.js 파일에서 토큰을 검증하는 getTokens() 메소드를 가져을 가져와, 임시 로그인을 구현합니다.

 

* 로그인 기능 구현에 관해서는 https://tae-jun.tistory.com/20 의 글을 참고했습니다.

 

VerifyToken.js

import axios from "axios";
import AsyncStorage from '@react-native-async-storage/async-storage'

const URL = 'http://서버IP:포트'


export const getTokens = (email, password, navigation) => {
  axios.post(`${URL}/login`,
  {
    "userEmail": email,
    "userPassword": password
  })
  .then(res =>{{
        //accessToken, refreshToken 로컬에 저장
        if (res.status === 200){
          AsyncStorage.setItem('user', JSON.stringify({
            'accessToken': res.data.accessToken,
            'refreshToken': res.data.refreshToken,
            'userEmail': email
          }))
          navigation.replace('Splash');
        }

  }})
  .catch(error =>{
          if(error.response.status === 401){
              console.log(error.response.data)
          }
          else{
              console.log("알수 없는 오류")
          } 
        
  })
};

...

 

로그인을 시도하고 토큰을 발급하는 코드입니다.

 

로그아웃도 같은 방식으로 AsyncStorage를 활용하여 코딩하면 됩니다.