react-native-在每次调用API之前使用redux-thunk中间件检查jwt的到期

时间:2018-06-29 14:50:37

标签: react-native redux redux-thunk redux-middleware

对于我的本机应用程序,我需要确保在每次对服务器的获取请求之前,应先执行以下用例

->检查保存到redux的令牌的到期日期。

->如果令牌未过期,则应用会继续向服务器发送请求的regionMatches

->如果令牌已过期,则应用会立即向fetch发送新请求,而不会让用户知道。成功刷新令牌后,应用会继续向服务器发送请求的refresh token

我尝试使用fetch实现中间件,但是我不知道它是否是好的设计。我只需要有redux-thunkredux经验的人就中间件代码给我反馈。

这是我通过调度react-动作创建者向服务器发出请求的方法,用于我的应用程序组件。

checkTokenAndFetch

这是动作创建者-url = "https://———————"; requestOptions = { method: 'GET', headers: { 'Authorization': 'Bearer ' + this.props.token } }; dispatch(authActions.checkTokenAndFetch(url, requestOptions)) .then((data) => { }) 位于authActions.js中  我的checkTokenAndFetch所在的文件

actions

这里有function checkTokenAndFetch(url, requestOptions){ return dispatch => { if(authServices.isTokenExpired()){ console.log("TOKEN EXPIRED"); authServices.refreshToken() .then( refreshToken => { var arr = refreshToken.split('.'); decodedToken = base64.decode(arr[1]); newTokenExpDate = JSON.parse(decodedToken).exp; dispatch(writeTokenToRedux(refreshToken,newTokenExpDate)); }, error => { Alert.alert("TOKEN refresh failed","Login Again"); Actions.login(); } ); } else{ console.log("TOKEN IS FRESH"); } return authServices.fetchForUFS(url, requestOptions) .then( response => { return response; }, error => { } ) ; } } isTokenExpired函数,它们在另一个名为authServices.js的文件中。

refreshToken

和我的authServices.js中的function isTokenExpired(){ var newState = store.getState(); var milliseconds = (new Date).getTime(); var exDate = newState.tokenExpDate; return milliseconds>exDate*1000 } function refreshToken(){ var refreshToken = store.getState(); return fetch('https://—————————', { method: 'POST', headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + refreshToken.token } }) .then((response) => { return response._bodyText; }) .catch((error) => { return error; }) } 函数在完成令牌检查(刷新)之后对服务器进行调用。

fetchForUFS

我已经阅读了大量的function fetchForUFS(url,requestOptions){ return fetch(url, requestOptions) .then((response) => { return response.json(); }) .then((responseData) =>{ return responseData; }) .catch((error) => { }) } redux-thunkredux-promise文档,但是我不确定我是否真的在实现中间件逻辑?

0 个答案:

没有答案