React在ajax調用重新路由

我有我的應用程序使用passport工作的認證方。這會給我一個403當用戶不能訪問特定的路由，這也包括API路由。React在ajax調用重新路由

即

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 
      }); 
}

如何，當我到了錯誤部分，重定向到另一個路線？

請注意，這個文件是一個服務文件，該getAll方法從React組件調用：

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

我知道我能做到這一點在這個loadCalendar功能，但是這將意味着，任何時候我做了打電話給我需要包括一個error塊的任何服務，我寧願將它集中在service文件中。

來源

2016-08-23 Tikkes

因此，對於試圖找出這個問題的人來說，我前一段時間發現了它。

首先，您需要在您的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); 
     } 
//.........

來源

2016-09-26 07:41:19 Tikkes

React在ajax調用重新路由

回答

相關問題