对于我的本机应用程序,我需要确保在每次对服务器的获取请求之前,应先执行以下用例
->检查保存到redux的令牌的到期日期。
->如果令牌未过期,则应用会继续向服务器发送请求的regionMatches
->如果令牌已过期,则应用会立即向fetch
发送新请求,而不会让用户知道。成功刷新令牌后,应用会继续向服务器发送请求的refresh token
我尝试使用fetch
实现中间件,但是我不知道它是否是好的设计。我只需要有redux-thunk
和redux
经验的人就中间件代码给我反馈。
这是我通过调度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-thunk
和redux-promise
文档,但是我不确定我是否真的在实现中间件逻辑?