ajax调用的React reroute

Question

我的应用程序有一个使用passport的身份验证端。当用户无法访问特定的路由时，这将给我一个403返回，这也包括api路由。

即

app.use('/api/calendar', passport, authorize([roles.SOME_ROLE]), calendar);

稍后，我调用此api/calendar路由来获得如下日历：

var getAll = function () {
    return $.get(routes.MAIN + routes.GET_CALENDAR)
            .error(function(error) {
                 //this is where I am stuck
            });
}

当我到达错误部分时，如何重定向到另一个路由？

请注意，此文件是一个服务文件，从React组件调用getAll方法：

loadCalendar: function () {
            var self = this;
            calendarService.getAll()
                .then(function (data) {
                    self.props.load(data);
                });
        },

我知道我可以在这个loadCalendar函数中做到这一点，但这意味着每当我调用任何服务时，我都需要包含一个error块，并且我更喜欢将它集中在service文件中。

Answer 1

所以，对于试图弄清楚这一点的人来说，我在一段时间前找到了它。

首先，您的React组件中需要有一个Router。

var withRouter = require('react-router').withRouter;
var SomeComponent = withRouter(
    React.createClass({
        PropTypes: {
        },
        .........

接下来，我们设置我们的服务以便能够调用Router

var router = null;
var setRouter = function (routerToSet) {
    router = routerToSet;
}
//..... other stuff

module.exports: {
//.....
setRouter: setRouter
}

现在，我们可以在发生Ajax错误时调用要重定向的路由器

function handleErrorResponse(error, router) {
    if(error.status == statusCodes.UNAUTHORIZED) {
        if(router) {
            router.replace(unauthorizedPath);
        }
        else {
            toastr.error("Router not defined", "CRITICAL ERROR");
            throw new Exception("CRITICAL ERROR: Router not defined");             
        }
    }
    else {
        return error; 
    }
}


function handleError(error) {
    return handleErrorResponse(error, router);
}

var myAjaxCallToHandle= function () {    
    return $.ajax({
        url: routes.where_ever,
        data: JSON.stringify(data),
        method: "POST",
        contentType: "application/json"
    })
    .error(handleError);
}

剩下的唯一要做的事情就是在组件中耦合Router

//.........
        getInitialState: function () {
            unitPlantService.setRouter(this.props.router);
        }
//.........