AsyncStorage 활용 : token 저장

토큰 스터디 화이팅

구글 로그인 구현을 iOS, Android 모두 완료했다.

구글 로그인을 마치는 순간, 구글 서버로부터 유저 정보와 토큰이 날라올 것이고, 우리는 여기서 필요한 정보를 저장하여 백으로 보내줄 것이다. Swift를 공부할 때엔, 받아온 token을 KeychainWrapper를 활용하여 안전하게 보관을 하고 필요할 때마다 꺼내서 인터셉터를 통해 헤더에 얹어서 API를 쏴주었다. RN 스터디 순서는 다음과 같다.

• 토큰을 어떻게 저장할 것인지
• Axios 상에서 Interceptor는 어떻게 구현하는지
• 헤더에 얹어서 token을 .post하였다면, refresh Token 갱신을 어떻게 하는지

Token 저장하기

 보통 State와 같은 Component의 상태 관리를 위해서는 Redux를 사용한다. 하지만 우리는 AccessToken, RefreshToken과 같은 토큰 보관을 위해서는 앱이 꺼져도 써야하는 데이터 관리를 위해서 Local 데이터베이스에 저장해야한다. 이를 위해 이번 글에서는 AsyncStorage를 공부하여 기록해보려고 한다.

AsyncStorage를 사용하는 이유는..

• 비동기적(async)으로 데이터를 저장 또는 불러오며, 영구적으로 저장시킨다.
• 앱이 다운되더라도 기존 저장된 변수 및 세팅 사항들이 보존된다.
• 오프라인 데이터베이스 담당 라이브러리 중 monthly download 가 가장 높다 : )

사용을 위한 저장 / 불러오기는 setItem / getItem 으로 이루어지며 string 값으로 입력시켜야 한다. 따라서 JSON이나 ARRAY형을 저장할 때에 다소 불편함이 있다. 

const signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      const accessToken = (await GoogleSignin.getTokens()).accessToken;
      setUser(userInfo);
      console.log('due_______', userInfo);
      console.log('Access-Token_____ : ', accessToken);
    } catch (error) {
      console.log('MESSAGE', error.message);
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        console.log('User Cancelled the Login Flow');
      } else if (error.code === statusCodes.IN_PROGRESS) {
        console.log('Signing In');
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        console.log('Play services Not Availbale');
      } else {
        console.log('Some other Error happened');
      }
    }
  };

우선, 저장하기 앞서 현재 받아온 accessToken은 GoogleSignin.getTokens()를 통해 변수 accessToken 안에 넣어준 상태이다.

AsyncStorage 설치

문서 설명에 따라 설치부터 진행한다

(https://github.com/react-native-async-storage/async-storage)

yarn add @react-native-async-storage/async-storage

...

npx pod-install // cd ios && pod install && cd ..

코드 작성

-setItem : 첫 번째 인자로 키 값을 주고, 두 번째 인자는 저장할 값을 준다 

AsyncStorage.setItem('Key', 'String');
AsyncStorage.setItem('Num', 10 + '');

//store method
const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

-getItem : 불러올 값의 키 값을 인자로 넣어준다. 단, 찾으려는 키 값이 없을 시 null을 리턴한다.

 

AsyncStorage.getItem('Key');

//get method
const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

적용된 코드는 아래와 같다.

  const storeData = async (value: string) => {
    try {
      await AsyncStorage.setItem('GoogleAccessToken', value);
      console.log('token saved successfully');
    } catch (e) {
      console.log('token saved error : Asynce Storage');
    }
  };

  const signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      const accessToken = (await GoogleSignin.getTokens()).accessToken;
      //google auth
      console.log('due_______', userInfo);
      console.log('Google Access Token : ', accessToken);
      setUser(userInfo);
      //token setting
      storeData(accessToken);
      //token getItem
      AsyncStorage.getItem('GoogleAccessToken').then(res =>
        console.log('Storage Token : ', res),
      );
    }
  }

그 결과, google server 를 통해 받아온 accesstoken과 Storage에 'GoogleAccessToken'의 키 값으로 입력된 값을 콘솔로 출력한 결과 동일하게 나오는 것을 확인했다.