リアクト・アプリケーションからのAPIのユーザー認証

Question

私はNodalで構築された単純なAPIを使用して、ユーザーが新しいジョブ（本質的にサービス事業の作業指示書）を作成できるようにします。 APIはOAuthを使用しているため、新しいジョブを作成するには、まずユーザ名とパスワードで認証してトークンを取得する必要があります。

フロントエンドはReactで構築されます。サイトにアクセスするには、ユーザー名とパスワードでログインする必要があります。ユーザー名とパスワードは、API呼び出しを行うためのトークンが与えられます。 2つの質問：

1）ページが更新されるたびにユーザーがログインする必要がないように、APIトークンを安全に保存するにはどうすればよいですか？

2）この同じログイン手順を使用して、フロントエンドアプリ内の特定のページにアクセスできるかどうかを確認するにはどうすればよいですか？

Answer 1

これは私の現在のプロジェクトで使用したプロセスです。ユーザーがログインすると、トークンを取得してlocalStorageに格納します。その後、ユーザーが任意のルートに移動するたびに、ルートがホッとしているコンポーネントがラップされます。トークンをチェックするHOCのコードは次のとおりです。

export function requireAuthentication(Component) { 

    class AuthenticatedComponent extends React.Component { 

     componentWillMount() { 
      this.checkAuth(this.props.user.isAuthenticated); 
     } 

     componentWillReceiveProps (nextProps) { 
      this.checkAuth(nextProps.user.isAuthenticated); 
     } 

     checkAuth (isAuthenticated) { 
      if (!isAuthenticated) { 
       let redirectAfterLogin = this.props.location.pathname; 
       browserHistory.push(`/login?next=${redirectAfterLogin}`); 
      } 
     } 

     render() { 
      return (
       <div> 
        {this.props.user.isAuthenticated === true 
         ? <Component {...this.props}/> 
         : null 
        } 
       </div> 
      ) 

     } 
    } 

    const mapStateToProps = (state) => ({ 
     user: state.user 
    }); 

    return connect(mapStateToProps)(AuthenticatedComponent); 
} 

はその後、私のindex.jsに私はそうのように、このHOCで保護された各ルートをラップ：

<Route path='/protected' component={requireAuthentication(ProtectedComponent)} /> 

これは、ユーザーの減速がどのように見えるかです。

export default function userReducer(state = {}, action) { 
    switch(action.type) { 
     case types.USER_LOGIN_SUCCESS: 
      return {...action.user, isAuthenticated: true}; 
     default: 
      return state; 
    } 
} 

action.userにトークンが含まれています。トークンは、ユーザーが最初にログインするときにapiから来るか、このユーザーがすでにログインしているユーザーであればlocalstorageから来ることができます。