反応認証フローの確認

Question

私はnodejsにいくつかのAPIを、クライアント側にReact Appを持っています。私は私のAPI/backofficeの認証システムをjwtトークンで作成しようとしましたが、私はjsonwebtokenを使ってサーバ側のトークンを作成していますが、クライアント側には疑念があります...ログイン時にlocalstorage React-Router "onUpdate"を使ってローカルストレージにトークンがあるかどうかを確認します。そうでなければ、ログインするためにリダイレクトしません。私のアプリでは、各Ajaxリクエストに対してauthヘッダーを追加します。

これは私が

$.get('/login',credential, function (result) { 
    localStorage.setItem('id_token', result.token) 
}); 

ジェネリックリクエストログイン私のルータここ

export const isLoggedIn = (nextState, replace) => { 
    console.log(localStorage.getItem('id_token')); 
} 
<Router history={browserHistory} onUpdate={isLoggedIn} > 
    <Route path="/" component={App}> 
     <IndexRoute component={Login.Login} /> 
     <Route path="admin/" component={Dashboard} /> 
     <Route path="admin/tutti" component={Users} /> 
    </Route> 
</Router> 

です：

$.ajax({ 
    url:"/api/users", 
    type:'GET', 
    contentType: "application/json", 
    success:function (result) {}, 
    headers: {"x-access-token": localStorage.getItem('id_token')} 
}); 

をこれはインクルードは認証フローを反応させるのに管理するための正しい方法は何ですか？ 私の疑問は、isLoggedIn上に何らかの形でトークンを確認する必要がありますか？

ありがとうございます！

Answer 1

あなたはHigher Order Componentsを知っていますか？ここで

はHOCについての記事です：https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.hb4ck2u52

は、認証フローがHOCのように記述することができます反応します。例えば

：

import React, { Component, PropTypes } from 'react'; 

export default function (ComposedComponent) { 
    class Auth extends Component { 
    componentWillMount() { 
     const isLoggedIn = .... // your way to check if current user is logged in 
     if (!isLoggedIn) { 
     browserHistory.push('/'); // if not logged in, redirect to your login page 
     } 
    } 
    render() { 
     return <ComposedComponent {...this.props} />; 
    } 
    } 
    return Auth; 
} 

しかし、私はあなたがそのようなReduxのようFLUXの流れを、使用、およびReduxのストアにあなたの状態を保存することをお勧め。ここで

は私のReduxの実装です：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { browserHistory } from 'react-router'; 

export default function (ComposedComponent) { 
    class Auth extends Component { 
    componentWillMount() { 
     if (!this.props.isLoggedIn) { 
     browserHistory.push('/login'); 
     } 
    } 
    componentWillUpdate(nextProps) { 
     if (!nextProps.isLoggedIn) { 
     browserHistory.push('/login'); 
     } 
    } 
    render() { 
     return <ComposedComponent {...this.props} />; 
    } 
    } 
    Auth.propTypes = { 
    isLoggedIn: PropTypes.bool.isRequired, 
    }; 
    function mapStateToProps(state) { 
    return { isLoggedIn: state.userReducer.isLoggedIn }; 
    } 
    return connect(mapStateToProps)(Auth); 
} 

使用法：

import auth from '/path/to/HOC/Auth'; 

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Login.Login} /> 
     <Route path="admin/" component={auth(Dashboard)} /> // wrap components supported to be protected 
     <Route path="admin/tutti" component={auth(Users)} /> 
    </Route> 
</Router>