サーバ側リアクタユーザ認証

Question

私はKoaサーバの上でReactRouterを実行しています。

私のKoaサーバーは、すべての要求が（index351を使用して）（koa-connect-history-api-fallbackを使用して）指し示すように構成されており、要求はReactRouterに転送されます。これはすべてうまくいきますが、私はユーザー認証を行う方法を理解するのに問題があります。

ルートを保護して、ルートにアクセスするためにはユーザーがログインする必要があります。問題は、自分のログインページがルートの1つであることです。これは、ユーザーがログインページにアクセスするためにログインする必要があることを意味します。

これを回避する良い方法はありますか？たとえば、私のKoaサーバーでは、 '/ login'ルート以外のすべてのルートをどうにか保護できますか？私はReactRouter内の認証を扱うこのexampleを読んだことがありますが、クライアント側であなたの認証を得ることは私には不十分です。私はベースオフになる可能性があります。あなたの好奇心の場合

、私はこの例ではreact-redux-starter-kit

Answer 1

デコレータを使用して最上位コンポーネントを認証できます。

// auth.js 
import React, {Component} from 'react'; 
import { connect } from 'react-redux'; 

export default function(ComposedComponent) { 
    class Auth extends Component { 
     static contextTypes = { 
      router: React.PropTypes.object 
     } 

     componentWillMount() { 
      if (!this.props.authenticated) { 
       this.context.router.push('/'); 
      } 
     } 

     componentWillUpdate(nextProps) { 
      if (!nextProps.authenticated) { 
       this.context.router.push('/'); 
      } 
     } 

     render() { 
      return <ComposedComponent {...this.props} /> 
     } 
    } 

    function mapStateToProps(state) { 
     return {authenticated: state.auth.authenticated}; 
    } 

    return connect(mapStateToProps)(Auth); 
} 

と：

@auth 
...your component... 

それとも、認証モジュールを持っていた場合は、以下「reduxy」方法でそれを行うことができます：

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="login" component={Login} /> 
     <Route path="logout" component={Logout} /> 
     <Route path="about" component={About} /> 
     <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
    </Router> 
), document.getElementById('example')) 

Answer 2

をオフに働いている私はReactRouterとルートを保護するための責任を残して、あなたが実際にレンダリングしたいルートを把握するために、サーバー上のmatchを使用します/

重要なことに、Koaサーバーにリクエストが送信されると、ユーザーが認証されているかどうかを知ることができる認証ミドルウェアによって実行されます。この情報をReduxストアに反映させます。

{ 
    user: { 
    authenticated: true, 
    role: 'admin' 
    } 
} 

、またはより良いあなたは減速があなたのためにこれを行いストア上でアクションを派遣することができます：あなたは、このような初期状態のものとストアを生成することができますどちらか。

これで、サーバーにルートを作成したとき（店舗を通過したとき）、リアクタールーターは、何が問題なのか、何がないのかを正確に知ることができます。つまり、user.authenticatedをチェックしてonEnterの経路を保護している場合は、サーバー上でmatchを呼び出すとそれを守り、/loginなどのリダイレクトを返します。例のフォーカス取得時には、次のようになります。

const ensureLoggedIn = (nextState, replace) => { 
    if (!store.getState().user.authenticated)) { 
     replace('/login'); 
    } 
}; 

あなたはそれがmatchへのコールバックでの引数であるredirectLocationにリダイレクトキャプチャすることができます。マッチhereについてすべて読む次に、サーバres.redirectを新しい場所に使用するだけです。

もちろん、このタイプのルート保護は便宜的なものです。機密情報を含むAPIエンドポイントを正当に保護したいと思うでしょう。しかし、この方法は、クライアントとサーバー上のルーティングに同じロジックを使用しているため、非常に労力がかかりません。