CODEWITHSUNDEEP
node.jsreactjsreact-router
Houssem Fathallah
Houssem Fathallah

Reputation: 171

Server side react router onEnter handling, transition.redirect is not a function

for my isomorphic application, i'm usign react router (2.0.1) and i need to handle authentication, so i used the onEnter hook , according to the documentation api. I need to handle authentication but getting

TypeError: transition.redirect is not a function

routes.jsx file 

**/**
 *
 * @param next
 * @param transition
 * @param callback
 */
function  requireAuth  (next, transition, callback) {
    if (!window.user){
        transition.abort();
        transition.redirect ({
            pathname: '/login',
            state: { nextPathname: next.location.pathname }
        }, transition);
    }
    else {
        callback(null, transition);
    }
}**



<Router history={history} onUpdate={onUpdate} onEnter={requireAuth}>
            <Route path="/rt/" component={RealTime}/>
            <Route path="/" component={Blank}/>
            {devRoutes}

 </Router>

server.js file

app.get('*', function(req, res, next) {
 Router.run(routes(), location, function(e, i, t) {
      var str = React.renderToString(
                  React.createElement(Router, i));
      res.send (str)
  }
}

Upvotes: 0

Views: 1122

Answers (2)

Houssem Fathallah
Houssem Fathallah

Reputation: 171

There is no transition.redirect function, i need to modify the transition redirectInfo object in the onEnter transition hook using transition.to and then verfiy in the main server handler function.

/**
 *
 * @param next
 * @param transition
 * @param callback
 */
function  requireAuth  (next, transition, callback) {
    var loginPath = '/account/login/' ;
    if (!window.user && !(next.location.pathname === loginPath)){
        transition.abort();
        transition.to(loginPath, null, {
            //data: req.body,
            //errors: res.body
        })
    }
    callback()
}

The redirection is not handled on onEnter hook but in the main server get handler.

app.get('*', function(req, res, next) {
 Router.run(routes(), location, function(e, i, transition) {
     // **********************************************
     //  handling redirection info 
     if (transition.isCancelled) {
        console.log ('transition cancelled');
        return res.redirect(302, transition.redirectInfo.pathname);
      }
     // ********************************************************
      var str = React.renderToString(
                  React.createElement(Router, i));
      res.send (str)
  }
}

Upvotes: 0

PijusV
PijusV

Reputation: 63

I think your requireAuth should look like this

function  requireAuth  (next, transition, callback) {
    if (!window.user){
        transition({
            pathname: '/login',
            state: { nextPathname: next.location.pathname }
        });
    }
    else {
        callback();
    }
}

you can see here that transition doesn't call methods and if 'if' statement fails you just pass empty callback to continue to the page

Upvotes: 1

Related Questions