使用AsyncStorage檢查React Native中的Json Web Token

因此，在我的react-native項目中出現了一個非常常見的情況：在路由器掛載之前，檢查用戶是否具有JWT（Json Web Token）以進行身份驗證。使用AsyncStorage檢查React Native中的Json Web Token

這很容易在陣營：

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

但反應母語使用AsyncStorage代替localStorage和異步功能已困擾了我這麼多。我無法在App組件中使用異步等待，因爲任何使用async關鍵字的函數都將始終返回promise，而不是反應組件。

這裏是我的代碼，很顯然，它的分解：

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

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

應用始終呈現前智威湯遜是牽強。

如何讓應用程序組件（我的整個應用程序的根）等到jwt獲取諾言已解決？

編輯：

由於@zerkms指出，JavaScript不阻塞。然後，我能想到的唯一解決方案是將應用程序變成React類並使用componentWillMount()，但這會使App組件變得笨重。有更好的解決方案

來源

2016-12-07 Stanley Luo

'await'不阻塞，因此，它的工作原理完全一樣，你實現它。 – zerkms

@zerkms感謝您的評論！但是，等待的目的是什麼？而且，如果我想在這裏阻止，我應該採取什麼方法？ –

您無法使用javascript進行阻止。 – zerkms

AsyncStorage預計2個參數，errorCallback和value，您必須編寫代碼以這種方式

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

來源

2016-12-07 06:12:10

這似乎不是正確的語法。在這裏查看官方文檔https://facebook.github.io/react-native/docs/asyncstorage.html。 –

@StanleyLuo你是對的，我剛剛更新了我的答案 –

其實它仍然不正確。第一個參數應該是關鍵，然後是回調函數。 –

使用AsyncStorage檢查React Native中的Json Web Token

回答

相關問題