4

对于我的 react-native 应用程序，我需要确保在每个 fetch 请求到服务器之前，应该执行下面的用例

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

--> 如果令牌没有过期，应用程序继续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) => {

    })

这是动作创建者 - 位于我所在checkTokenAndFetch的 authActions.js 文件中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的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在 authServices.js 中的函数，用于在完成令牌检查（刷新）内容后调用服务器。

function fetchForUFS(url,requestOptions){

    return fetch(url, requestOptions)
        .then((response) => {
            return response.json();
        })
        .then((responseData) =>{
        return responseData;
    })
        .catch((error) => {
        })
}

我已经阅读了大量的redux-thunk,redux-promise和middleware文档，但我不确定我是否真正实现了中间件逻辑？

4

0 回答 0