1

我在react.js中編寫SPA,我使用的是redux-api來處理後端連接。我想在執行主要操作之前執行同步操作以刷新身份驗證令牌;這樣,每次我會對後端做一個動作,我都會確定這個令牌是有效的。預取塊內的redux-api同步操作

const endpoints = { 
{ 
    url: '/some/url', 
    crud:true, 
    prefetch:[ 
    ({actions, dispatch, getState}, cb) =>{ 
     actions.auth_token.post(JSON.stringify({ 
     token: "my token", 
     refreshToken: "my_refresh_token" 
     }),null, (err, data) =>{ 
      if(err){ 
      // HANDLE ERROR 
      } 
      setToken(data) 
     }) 
    } 
    ] 
} 
} 

const api = reduxApi(endpoints) 

如何以同步方式調用預取功能?所以首先令牌刷新然後是Action?

編輯 我們可以做的東西異步,重要的是CB(最後通話),這裏是例子

const endpoints = { 
{ 
    url: '/some/url', 
    crud:true, 
    prefetch:[ 
    ({actions, dispatch, getState}, cb) =>{ 
     let mills = new Date().getTime() 
     const { token, generationTime, accessTokenLife, refreshTokenLife, refreshToken } = localStorage 
     // Conditions: exixts token, it is expired, refresh token is not expired 
     if(token && generationTime + accessTokenLife - 500 < mills && generationTime + refreshTokenLife - 500 > mills){ 

     dispatch(actions.token_refresh.get(null, null, (err, data) =>{ 
     if(err){ 
      dispatch(setError(err)) 
     }else{ 
      refreshTokenData(data) 
     } 
     cb() 
     }))  
    }else{ 
    cb() 
    } 
} 
]}} 

const api = reduxApi(endpoints) 

回答

0

您可能不需要每次做的時候請求令牌異步行爲。事實上,我鼓勵你不要。

當您對用戶進行身份驗證並使用web storage進行緩存時,您可以請求該令牌。現在,您不必每次都需要發送網絡請求來檢索用戶令牌,只需檢查瀏覽器緩存的存儲。如果該用戶的令牌存在,則該用戶已成功認證。否則,用戶尚未登錄,您可以將用戶重定向到身份驗證頁面。

由於這不是您的問題的答案,而是解決您的問題的另一種方式,我還將以與問題更爲一致的方式回答您的問題。您應該能夠利用promise chaining來請求用戶的令牌,然後一旦解決該問題,請執行任何其他操作。

我會用一種抽象的方式解釋,與redux-api沒有明確關係,您應該能夠輕鬆地適應redux-api特定的構造。

const actionOne =() => { 
    actions.post(myJson) 
    .then(response => actionTwo(response)) 
    .catch(error => console.log(error)) 
} 

你需要做一個重要的修改是轉換actions.auth_token.post返回一個承諾。然後,您可以將其他行動鏈接到解決方案的承諾上。如果您不熟悉承諾MDNs documentation是相當不錯的。有關將函數從回調轉換爲承諾的更多信息,此堆棧溢出answer非常詳細。

+1

嗨!感謝你的回答。 在這個例子中,我想讓SSCCE指出問題,在開發環境中,我得到令牌並在它到期之前刷新它。在任何情況下,我找到了解決方案:我可以使用異步操作,如果成功或錯誤,我必須調用cb()函數。而已! –