使用React-Router和Mixins的服务器端身份验证

Question

I'm trying to use React-Router's willTransitionTo for Auth management.

My flow is

Component (Auth Mixin) -> WillTransitionTo (checks if logged in / saves transition) -> Login Component (on success, retries old transition)

This works for the client side, however I'm having trouble authorizing users on the server side.

Component

React.createClass({
    mixins: [Authentication]
    render: function() {
    return <h1>Blah</h1>;
  }
})

Authentication Miixin

var Authentication = {
    statics: {
        willTransitionTo: function(transition) {
            if (!auth.loggedIn()) {
                PromptLogin.attemptedTransition = transition;
                transition.redirect('/login');
            }
        }
    }
};

Auth Service

module.exports = {
    loggedIn: function() {
        if (typeof(window) !== 'undefined' && window.flux) {
            return flux.store('UserStore').state.currentUser.loggedIn
        } else {
            return false;
        }
    }
};

Server

Router.create({
    routes: AppRoutes,
    location: req.url,

    onAbort: function (reason) {
        if (reason instanceof Error) {
            next(reason)
        } else if (reason.constructor.name === 'Redirect') {
            // next(null, newRouter, {redirect: reason})
            res.redirect('/login');
        } else {
           next(null, newRouter, reason)
        }
    },

    onError: function (err) {
        next(err)
    }
});

Router.run....

I want to somehow pass Flux to my Auth Service so I can check my stores to see if a user is logged in or not. I've tried passing in flux through the Mixin definition, but that doesn't work :(.

Thanks!

Answer 1

Apparently it's a wanted feature to be able to add context / pass params into the transition object (for willTransitionTo and willTransitionFrom).

Here's a pull request with lots of comments discussing the issue / use cases

https://github.com/rackt/react-router/pull/590