AsyncStorage를 사용하여 React Native에서 Json Web Token을 확인하십시오.

Question

이렇게 반응이 많은 프로젝트에서 매우 일반적인 경우가 있습니다 : 라우터가 마운트되기 전에 사용자가 인증 목적으로 JWT (Json Web Token)를 가지고 있는지 확인하십시오.

const token = localStorage.getItem() 
if (token !== null) store.dispatch(checkTokenSuccess()) 

을하지만 반응 네이티브가 AsyncStorage 대신 localStorage 사용하고, 비동기 기능이 너무 많은 나를 귀찮게 : 그것은에서 쉽게

은 반응한다. 나는 async 키워드를 가진 함수가 언제나 반응 컴포넌트 대신 약속을 반환하기 때문에 App 컴포넌트 내부에서 비동기식을 사용할 수 없다.

여기 내 코드는, 분명히,이 생겼입니다 : JWT를 가져올 전에

AsyncStorage.getItem('JWT') 
    .then((jwt) => { 
    if (jwt !== null) { 
     store.dispatch(checkJwtSuccess()); 
    } 
    }); 

const App =() => (
    <Provider store={store}> 
    <MainRouter /> 
    </Provider> 
); 

앱은 항상 렌더링합니다.

jwt 가져 오기 약속이 해결 될 때까지 앱 구성 요소 (내 전체 앱의 루트)를 대기시키는 방법은 무엇입니까?

편집 :

@zerkms가 지적한 바와 같이, 자바 스크립트를 차단하지 않습니다. 그런 다음 내가 생각할 수있는 유일한 해결책은 앱을 React 클래스로 바꾸고 componentWillMount()을 사용하는 것입니다.하지만 App 구성 요소를 다루기 힘들게 만듭니다. 더 나은 해결책이 있습니까?

Answer 1

AsyncStorage은 당신이 그것을 구현 정확하게 작동하므로이 매개 변수 errorCallback 및 value, 당신은,이 방법

AsyncStorage.getItem("key",(err,value)) => { 
    if(!err){ 
     console.log(value); 
    } 
});